add focus style to sort select

Author: Reeywhaar

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;
+  }
+}

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<Props, State> {
@@ -51,6 +52,7 @@ export class AuthPanel extends Component<Props, State> {
       isBlockedVisible: false,
       anonymousUsernameInputValue: 'anon',
       threshold: 3,
+      sortSelectFocused: false,
     };
 
     this.toggleBlockedVisibility = this.toggleBlockedVisibility.bind(this);
@@ -91,6 +93,16 @@ export class AuthPanel extends Component<Props, State> {
     }
   }
 
+  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<Props, State> {
 
   renderSort = () => {
     const { sort } = this.props;
+    const { sortSelectFocused } = this.state;
     const sortArray = getSortArray(sort);
     return (
       <span className="auth-panel__sort">
         Sort by{' '}
         <span className="auth-panel__select-label">
-          {sortArray.find(x => 'selected' in x && x.selected!)!.label}
-          <select className="auth-panel__select" onChange={this.onSortChange} onBlur={this.onSortChange}>
+          <span className={b('auth-panel__select-label-value', {}, { focused: sortSelectFocused })}>
+            {sortArray.find(x => 'selected' in x && x.selected!)!.label}
+          </span>
+          <select
+            className="auth-panel__select"
+            onChange={this.onSortChange}
+            onFocus={this.onSortFocus}
+            onBlur={this.onSortBlur}
+          >
             {sortArray.map(sort => (
               <option value={sort.value} selected={sort.selected}>
                 {sort.label}

frontend/app/components/auth-panel/index.ts

@@ -8,6 +8,7 @@ require('./__column/auth-panel__column.scss');
 require('./__pseudo-link/auth-panel__pseudo-link.scss');
 require('./__select/auth-panel__select.scss');
 require('./__select-label/auth-panel__select-label.scss');
+require('./__select-label-value/auth-panel__select-label-value.scss');
 require('./__sort/auth-panel__sort.scss');
 
 require('./__user-id/auth-panel__user-id.scss');