haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(prejoin) Fix focus stealing in settings (#12188) 

Remove ref focus from InputField component
Replace input component in GifsMenu and add ref focus
This commit is contained in:
Robert Pintilii 2022-09-16 13:05:15 +03:00 committed by GitHub
parent fef562d767
commit 4c9f3d287a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
react/features/base/premeeting/components/web/InputField.js
View File

@ -133,13 +133,6 @@ export default class InputField extends PureComponent<Props, State> {
onKeyPress = { this._onKeyPress } onKeyPress = { this._onKeyPress }
placeholder = { this.props.placeHolder } placeholder = { this.props.placeHolder }
readOnly = { this.props.readOnly } readOnly = { this.props.readOnly }
// eslint-disable-next-line react/jsx-no-bind
ref = { inputElement => {
if (this.props.autoFocus) {
inputElement && inputElement.focus();
setTimeout(() => inputElement && inputElement.focus(), 200);
}
} }
type = { this.props.type } type = { this.props.type }
value = { this.state.value } /> value = { this.state.value } />
); );

25
react/features/gifs/components/web/GifsMenu.tsx
View File

@ -10,9 +10,7 @@ import { makeStyles } from 'tss-react/mui';
import { createGifSentEvent } from '../../../analytics/AnalyticsEvents'; import { createGifSentEvent } from '../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../analytics/functions'; import { sendAnalytics } from '../../../analytics/functions';
import { IState } from '../../../app/types'; import { IState } from '../../../app/types';
// @ts-ignore import Input from '../../../base/ui/components/web/Input';
import InputField from '../../../base/premeeting/components/web/InputField';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
// @ts-ignore // @ts-ignore
import { sendMessage } from '../../../chat/actions.any'; import { sendMessage } from '../../../chat/actions.any';
import { SCROLL_SIZE } from '../../../filmstrip/constants'; import { SCROLL_SIZE } from '../../../filmstrip/constants';
@ -45,14 +43,6 @@ const useStyles = makeStyles()((theme: Theme) => {
}, },
searchField: { searchField: {
backgroundColor: theme.palette.field01,
borderRadius: `${theme.shape.borderRadius}px`,
border: 'none',
outline: 0,
...withPixelLineHeight(theme.typography.bodyShortRegular),
color: theme.palette.text01,
padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
width: '100%',
marginBottom: theme.spacing(3) marginBottom: theme.spacing(3)
}, },
@ -192,13 +182,18 @@ function GifsMenu() {
className = { cx(styles.gifsMenu, className = { cx(styles.gifsMenu,
overflowDrawer && styles.overflowMenu overflowDrawer && styles.overflowMenu
) }> ) }>
<InputField <Input
autoFocus = { true } autoFocus = { true }
className = { cx(styles.searchField, 'gif-input') } className = { cx(styles.searchField, 'gif-input') }
onChange = { handleSearchKeyChange } onChange = { handleSearchKeyChange }
placeHolder = { t('giphy.search') } placeholder = { t('giphy.search') }
testId = 'gifSearch.key' // eslint-disable-next-line react/jsx-no-bind
type = 'text' /> ref = { inputElement => {
inputElement?.focus();
setTimeout(() => inputElement?.focus(), 200);
} }
type = 'text'
value = { searchKey ?? '' } />
<div <div
className = { cx(styles.gifContainer, className = { cx(styles.gifContainer,
overflowDrawer && styles.gifContainerOverflow) }> overflowDrawer && styles.gifContainerOverflow) }>