feat: #70 select first option on blur (#75)

vitalybaev · Sep 13, 2021 · 93239ad · 93239ad
1 parent 29e3269
commit 93239ad
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/readme.md b/readme.md
@@ -74,6 +74,7 @@ const [value, setValue] = useState();
 | hintClassName              | Нет          | string                                                    | CSS класс блока текста-пояснения над подсказками, если не передан, используется класс для стилей из коробки.                                                                              |
 | highlightClassName         | Нет          | string                                                    | CSS класс элемента, подсвечивающего совпадения при наборе, если не передан, используется класс для стилей из коробки.                                                                     |
 | customInput                | Нет          | Element or string                                         | Кастомный компонент поля ввода, например от Styled Components                                                                                                                             |
+| selectOnBlur               | Нет          | boolean                                                   | Если `true`, то при потере фокуса будет выбрана первая подсказка из списка
 
 ## Методы
 

diff --git a/src/BaseSuggestions.tsx b/src/BaseSuggestions.tsx
@@ -122,13 +122,19 @@ export abstract class BaseSuggestions<SuggestionType, OwnProps> extends React.Pu
 
   private handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {
     const { suggestions } = this.state;
+    const { selectOnBlur, inputProps } = this.props;
 
     this.setState({ isFocused: false });
     if (suggestions.length === 0) {
       this.fetchSuggestions();
     }
 
-    const { inputProps } = this.props;
+    if (selectOnBlur) {
+      if (suggestions.length > 0) {
+        this.selectSuggestion(0, true);
+      }
+    }
+
     if (inputProps && inputProps.onBlur) {
       inputProps.onBlur(event);
     }
@@ -223,15 +229,17 @@ export abstract class BaseSuggestions<SuggestionType, OwnProps> extends React.Pu
     this.selectSuggestion(index);
   };
 
-  private selectSuggestion = (index: number) => {
+  private selectSuggestion = (index: number, isSilent = false) => {
     const { suggestions } = this.state;
     const { onChange } = this.props;
 
     if (suggestions.length >= index - 1) {
       const suggestion = suggestions[index];
       this.setState({ query: suggestion.value, inputQuery: suggestion.value, displaySuggestions: false }, () => {
-        this.fetchSuggestions();
-        setTimeout(() => this.setCursorToEnd(this.textInput));
+        if (!isSilent) {
+          this.fetchSuggestions();
+          setTimeout(() => this.setCursorToEnd(this.textInput));
+        }
       });
 
       if (onChange) {

diff --git a/src/types.ts b/src/types.ts
@@ -32,6 +32,7 @@ export interface CommonProps<SuggestionType> {
   highlightClassName?: string;
   minChars?: number;
   customInput?: ElementType;
+  selectOnBlur?: boolean;
 }
 
 export interface DaDataAddressMetro {