void;
onExited: () => void;
+ focusOriginElement: string;
}
export default function ConfirmManageUserSettingsModal(props: Props) {
+ const handleExited = () => {
+ props.onExited?.();
+ focusElement(props.focusOriginElement, true, true);
+ };
+
const title = (
);
}
diff --git a/webapp/channels/src/components/admin_console/system_users/system_users_list_actions/index.tsx b/webapp/channels/src/components/admin_console/system_users/system_users_list_actions/index.tsx
index c0b73fbc1a1..4b15eab7662 100644
--- a/webapp/channels/src/components/admin_console/system_users/system_users_list_actions/index.tsx
+++ b/webapp/channels/src/components/admin_console/system_users/system_users_list_actions/index.tsx
@@ -134,6 +134,7 @@ export function SystemUsersListAction({user, currentUser, tableId, rowIndex, onE
adminMode: true,
isContentProductSettings: true,
userID: user.id,
+ focusOriginElement: menuButtonId,
},
}));
}
@@ -144,6 +145,7 @@ export function SystemUsersListAction({user, currentUser, tableId, rowIndex, onE
dialogProps: {
user,
onConfirm: onConfirmManageUserSettingsClick,
+ focusOriginElement: menuButtonId,
},
}));
}, [user]);
diff --git a/webapp/channels/src/components/apps_form/apps_form_field/apps_form_select_field.tsx b/webapp/channels/src/components/apps_form/apps_form_field/apps_form_select_field.tsx
index 998bc9931c5..84fb8f02ecc 100644
--- a/webapp/channels/src/components/apps_form/apps_form_field/apps_form_select_field.tsx
+++ b/webapp/channels/src/components/apps_form/apps_form_field/apps_form_select_field.tsx
@@ -2,12 +2,14 @@
// See LICENSE.txt for license information.
import React from 'react';
+import type {StylesConfig} from 'react-select';
import ReactSelect from 'react-select';
import AsyncSelect from 'react-select/async';
import type {AppField, AppSelectOption} from '@mattermost/types/apps';
import type {UserAutocomplete} from '@mattermost/types/autocomplete';
import type {Channel} from '@mattermost/types/channels';
+import type {UserProfile} from '@mattermost/types/users';
import {AppFieldTypes} from 'mattermost-redux/constants/apps';
import type {ActionResult} from 'mattermost-redux/types/actions';
@@ -22,7 +24,7 @@ export type Props = {
field: AppField;
label: React.ReactNode;
helpText: React.ReactNode;
- value: AppSelectOption | null;
+ value: AppSelectOption | UserProfile | Channel | null;
onChange: (value: AppSelectOption) => void;
performLookup: (name: string, userInput: string) => Promise
;
teammateNameDisplay?: string;
@@ -38,14 +40,14 @@ export type State = {
}
const reactStyles = {
- menuPortal: (provided: React.CSSProperties) => ({
+ menuPortal: (provided) => ({
...provided,
zIndex: 9999,
}),
-};
+} satisfies StylesConfig;
const commonComponents = {
- MultiValueLabel: (props: {data: {label: string}}) => (
+ MultiValueLabel: (props: { data: { label: string } }) => (
{props.data.label}
@@ -57,7 +59,7 @@ const commonProps = {
openMenuOnFocus: false,
classNamePrefix: 'react-select-auto react-select',
menuPortalTarget: document.body,
- styles: reactStyles,
+ styles: reactStyles satisfies StylesConfig,
};
export default class AppsFormSelectField extends React.PureComponent {
@@ -88,7 +90,7 @@ export default class AppsFormSelectField extends React.PureComponent => {
+ loadDynamicUserOptions = async (userInput: string): Promise => {
const usersSearchResults: UserAutocomplete = await this.props.actions.autocompleteUsers(userInput.toLowerCase());
return usersSearchResults.users.filter((user) => !user.is_bot).map((user) => {
@@ -98,7 +100,7 @@ export default class AppsFormSelectField extends React.PureComponent => {
+ loadDynamicChannelOptions = async (userInput: string): Promise => {
let channelsSearchResults: Channel[] = [];
await this.props.actions.autocompleteChannels(userInput.toLowerCase(), (data) => {
@@ -111,11 +113,11 @@ export default class AppsFormSelectField extends React.PureComponent
-
id={`MultiInput_${field.name}`}
loadOptions={this.loadDynamicOptions}
defaultOptions={true}
@@ -134,11 +136,11 @@ export default class AppsFormSelectField extends React.PureComponent
-
id={`MultiInput_${name}`}
loadOptions={this.loadDynamicUserOptions}
defaultOptions={true}
@@ -157,11 +159,11 @@ export default class AppsFormSelectField extends React.PureComponent
-
id={`MultiInput_${name}`}
loadOptions={this.loadDynamicChannelOptions}
defaultOptions={true}
diff --git a/webapp/channels/src/components/apps_form/apps_form_field/select_channel_option.tsx b/webapp/channels/src/components/apps_form/apps_form_field/select_channel_option.tsx
index b7213273b05..f861020df4d 100644
--- a/webapp/channels/src/components/apps_form/apps_form_field/select_channel_option.tsx
+++ b/webapp/channels/src/components/apps_form/apps_form_field/select_channel_option.tsx
@@ -5,10 +5,10 @@ import React from 'react';
import {components} from 'react-select';
import type {OptionProps} from 'react-select';
-import type {AppSelectOption} from '@mattermost/types/apps';
+import type {Channel} from '@mattermost/types/channels';
const {Option} = components;
-export const SelectChannelOption = (props: OptionProps) => {
+export const SelectChannelOption = (props: OptionProps) => {
const item = props.data;
const channelName = item.display_name;
diff --git a/webapp/channels/src/components/apps_form/apps_form_field/select_user_option.tsx b/webapp/channels/src/components/apps_form/apps_form_field/select_user_option.tsx
index bc9e029e1c8..ba015aa0b47 100644
--- a/webapp/channels/src/components/apps_form/apps_form_field/select_user_option.tsx
+++ b/webapp/channels/src/components/apps_form/apps_form_field/select_user_option.tsx
@@ -5,7 +5,6 @@ import React from 'react';
import {components} from 'react-select';
import type {OptionProps} from 'react-select';
-import type {AppSelectOption} from '@mattermost/types/apps';
import type {UserProfile} from '@mattermost/types/users';
import {isGuest} from 'mattermost-redux/utils/user_utils';
@@ -30,7 +29,7 @@ const getDescription = (data: UserProfile): string => {
const {Option} = components;
-export const SelectUserOption = (props: OptionProps) => {
+export const SelectUserOption = (props: OptionProps) => {
const username = props.data.username;
const description = getDescription(props.data);
diff --git a/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx b/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx
index 91e6513440f..58a81ca61a1 100644
--- a/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx
+++ b/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx
@@ -135,7 +135,6 @@ function NotificationFromMembersModal(props: Props) {
backdrop={true}
show={show}
onExited={handleOnClose}
- aria-modal='true'
modalHeaderText={modalHeaderText}
>
diff --git a/webapp/channels/src/components/browse_channels/__snapshots__/browse_channels.test.tsx.snap b/webapp/channels/src/components/browse_channels/__snapshots__/browse_channels.test.tsx.snap
index 6138df0970a..644833cd6a2 100644
--- a/webapp/channels/src/components/browse_channels/__snapshots__/browse_channels.test.tsx.snap
+++ b/webapp/channels/src/components/browse_channels/__snapshots__/browse_channels.test.tsx.snap
@@ -2,7 +2,6 @@
exports[`components/BrowseChannels should match snapshot and state 1`] = `
}
+ modalLocation="center"
onExited={[Function]}
show={true}
+ showCloseButton={true}
+ showHeader={true}
>
{
return (