From 7fd3c563c7b0607d7e23495cd08ea08f588fce7d Mon Sep 17 00:00:00 2001
From: Vyrtsev Mikhail <reeywhaar@gmail.com>
Date: Sat, 27 Jul 2019 01:39:24 +0300
Subject: [PATCH] add focus style to sort select

---
 .../auth-panel__select-label-value.scss       |  9 +++++++
 .../app/components/auth-panel/auth-panel.tsx  | 24 +++++++++++++++++--
 frontend/app/components/auth-panel/index.ts   |  1 +
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/components/auth-panel/__select-label-value/auth-panel__select-label-value.scss

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 0000000000..1aa311c733
--- /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 8e0da2a50a..b77fd3c121 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<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}
diff --git a/frontend/app/components/auth-panel/index.ts b/frontend/app/components/auth-panel/index.ts
index 08bc638385..fab982708e 100644
--- a/frontend/app/components/auth-panel/index.ts
+++ b/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');