1 files changed, 67 insertions, 52 deletions

diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index e5b59cb19..4a5775579 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -1,4 +1,8 @@
-import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi/js';
+import {
+  mdiArrowRightDropCircleOutline,
+  mdiCloseCircle,
+  mdiMagnify,
+} from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import React, { Component, createRef } from 'react';
@@ -58,7 +62,7 @@ const styles = (theme: Theme) => ({
   label: {
     '& > div': {
       marginTop: 5,
-    }
+    },
   },
   popup: {
     opacity: 0,
@@ -153,9 +157,13 @@ class SelectComponent extends Component<IProps> {
   };
 
   private componentRef = createRef<HTMLDivElement>();
+
   private inputRef = createRef<HTMLInputElement>();
+
   private searchInputRef = createRef<HTMLInputElement>();
+
   private scrollContainerRef = createRef<HTMLDivElement>();
+
   private activeOptionRef = createRef<HTMLDivElement>();
 
   private keyListener: any;
@@ -168,7 +176,7 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  componentDidUpdate(prevProps: IProps, prevState: IState) {
+  componentDidUpdate() {
     const { open } = this.state;
 
     if (this.searchInputRef && this.searchInputRef.current) {
@@ -183,7 +191,9 @@ class SelectComponent extends Component<IProps> {
       const { data } = this.props;
 
       if (data) {
-        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
       }
     }
 
@@ -194,7 +204,10 @@ class SelectComponent extends Component<IProps> {
     const { value } = this.props;
 
     if (this.componentRef && this.componentRef.current) {
-      this.componentRef.current.removeEventListener('keydown', this.keyListener);
+      this.componentRef.current.removeEventListener(
+        'keydown',
+        this.keyListener,
+      );
     }
 
     if (value) {
@@ -210,13 +223,18 @@ class SelectComponent extends Component<IProps> {
     window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
   }
 
-  setFilter(needle: string = '') {
+  setFilter(needle = '') {
     const { options } = this.props;
 
     let filteredOptions = {};
     if (needle) {
-      Object.keys(options).map((key) => {
-        if (key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) || options[key].toLocaleLowerCase().startsWith(needle.toLocaleLowerCase())) {
+      Object.keys(options).map(key => {
+        if (
+          key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) ||
+          options[key]
+            .toLocaleLowerCase()
+            .startsWith(needle.toLocaleLowerCase())
+        ) {
           Object.assign(filteredOptions, {
             [`${key}`]: options[key],
           });
@@ -234,7 +252,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   select(key: string) {
-    this.setState((state: IState) => ({
+    this.setState(() => ({
       value: key,
       open: false,
     }));
@@ -247,11 +265,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   arrowKeysHandler(e: KeyboardEvent) {
-    const {
-      selected,
-      open,
-      options,
-    } = this.state;
+    const { selected, open, options } = this.state;
 
     if (!open) return;
 
@@ -264,7 +278,10 @@ class SelectComponent extends Component<IProps> {
         this.setState((state: IState) => ({
           selected: state.selected - 1,
         }));
-      } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
+      } else if (
+        e.keyCode === 40 &&
+        selected < Object.keys(options!).length - 1
+      ) {
         this.setState((state: IState) => ({
           selected: state.selected + 1,
         }));
@@ -272,7 +289,12 @@ class SelectComponent extends Component<IProps> {
         this.select(Object.keys(options!)[selected]);
       }
 
-      if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
+      if (
+        this.activeOptionRef &&
+        this.activeOptionRef.current &&
+        this.scrollContainerRef &&
+        this.scrollContainerRef.current
+      ) {
         const containerTopOffset = this.scrollContainerRef.current.offsetTop;
         const optionTopOffset = this.activeOptionRef.current.offsetTop;
 
@@ -282,10 +304,15 @@ class SelectComponent extends Component<IProps> {
       }
     }
 
-    switch (e.keyCode){
-      case 37: case 39: case 38:  case 40: // Arrow keys
-      case 32:  break; // Space
-      default: break; // do not block other keys
+    switch (e.keyCode) {
+      case 37:
+      case 39:
+      case 38:
+      case 40: // Arrow keys
+      case 32:
+        break; // Space
+      default:
+        break; // do not block other keys
     }
   }
 
@@ -307,13 +334,7 @@ class SelectComponent extends Component<IProps> {
       required,
     } = this.props;
 
-    const {
-      open,
-      needle,
-      value,
-      selected,
-      options,
-    } = this.state;
+    const { open, needle, value, selected, options } = this.state;
 
     let selection = '';
     if (!value && defaultValue && options![defaultValue]) {
@@ -325,10 +346,7 @@ class SelectComponent extends Component<IProps> {
     }
 
     return (
-      <Wrapper
-        className={className}
-        identifier="franz-select"
-      >
+      <Wrapper className={className} identifier="franz-select">
         <Label
           title={label}
           showLabel={showLabel}
@@ -345,14 +363,19 @@ class SelectComponent extends Component<IProps> {
           >
             <button
               type="button"
-               className={classnames({
-                 [`${inputClassName}`]: inputClassName,
-                 [`${classes.select}`]: true,
-                 [`${classes.hasError}`]: error,
-               })}
-              onClick= {!disabled ? () => this.setState((state: IState) => ({
-                open: !state.open,
-              })) : () => {}}
+              className={classnames({
+                [`${inputClassName}`]: inputClassName,
+                [`${classes.select}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+              onClick={
+                !disabled
+                  ? () =>
+                      this.setState((state: IState) => ({
+                        open: !state.open,
+                      }))
+                  : () => {}
+              }
             >
               {selection}
               <Icon
@@ -366,10 +389,7 @@ class SelectComponent extends Component<IProps> {
             </button>
             {showSearch && open && (
               <div className={classes.searchContainer}>
-                <Icon
-                  path={mdiMagnify}
-                  size={0.8}
-                />
+                <Icon path={mdiMagnify} size={0.8} />
                 <input
                   type="text"
                   value={needle}
@@ -384,10 +404,7 @@ class SelectComponent extends Component<IProps> {
                     className={classes.clearNeedle}
                     onClick={() => this.setFilter()}
                   >
-                    <Icon
-                      path={mdiCloseCircle}
-                      size={0.7}
-                    />
+                    <Icon path={mdiCloseCircle} size={0.7} />
                   </button>
                 )}
               </div>
@@ -399,7 +416,7 @@ class SelectComponent extends Component<IProps> {
               })}
               ref={this.scrollContainerRef}
             >
-              {Object.keys(options!).map(((key, i) => (
+              {Object.keys(options!).map((key, i) => (
                 <div
                   key={key}
                   onClick={() => this.select(key)}
@@ -413,7 +430,7 @@ class SelectComponent extends Component<IProps> {
                 >
                   {options![key]}
                 </div>
-              )))}
+              ))}
             </div>
           </div>
           <input
@@ -427,9 +444,7 @@ class SelectComponent extends Component<IProps> {
             ref={this.inputRef}
           />
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }