diff --git a/frontend/app/components/auth-panel/__select-label-value/auth-panel__select-label-value.scss b/frontend/app/components/auth-panel/__select-label-value/auth-panel__select-label-value.scss new file mode 100644 index 00000000..1aa311c7 --- /dev/null +++ b/frontend/app/components/auth-panel/__select-label-value/auth-panel__select-label-value.scss @@ -0,0 +1,9 @@ +.auth-panel__select-label-value_focused { + outline: 1px dotted; + outline-color: inherit; + + @supports (outline-color: -webkit-focus-ring-color) { + outline-color: -webkit-focus-ring-color; + outline-style: auto; + } +} diff --git a/frontend/app/components/auth-panel/auth-panel.tsx b/frontend/app/components/auth-panel/auth-panel.tsx index 8e0da2a5..b77fd3c1 100644 --- a/frontend/app/components/auth-panel/auth-panel.tsx +++ b/frontend/app/components/auth-panel/auth-panel.tsx @@ -39,6 +39,7 @@ interface State { isBlockedVisible: boolean; anonymousUsernameInputValue: string; threshold: number; + sortSelectFocused: boolean; } export class AuthPanel extends Component { @@ -51,6 +52,7 @@ export class AuthPanel extends Component { isBlockedVisible: false, anonymousUsernameInputValue: 'anon', threshold: 3, + sortSelectFocused: false, }; this.toggleBlockedVisibility = this.toggleBlockedVisibility.bind(this); @@ -91,6 +93,16 @@ export class AuthPanel extends Component { } } + onSortFocus = () => { + this.setState({ sortSelectFocused: true }); + }; + + onSortBlur = (e: Event) => { + this.setState({ sortSelectFocused: false }); + + this.onSortChange(e); + }; + toggleBlockedVisibility() { if (!this.state.isBlockedVisible) { if (this.props.onBlockedUsersShow) this.props.onBlockedUsersShow(); @@ -336,13 +348,21 @@ export class AuthPanel extends Component { renderSort = () => { const { sort } = this.props; + const { sortSelectFocused } = this.state; const sortArray = getSortArray(sort); return ( Sort by{' '} - {sortArray.find(x => 'selected' in x && x.selected!)!.label} - {sortArray.map(sort => (