From 821547e1ad7b697f02f7c7ce80bcf980d4d04842 Mon Sep 17 00:00:00 2001
From: ireic <ivor.reic@gmail.com>
Date: Fri, 27 Dec 2019 17:35:00 +0100
Subject: [PATCH] Fixed a select component bug

---
 .../src/shared/components/Select/Dropdown.jsx | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/src/shared/components/Select/Dropdown.jsx b/client/src/shared/components/Select/Dropdown.jsx
index 2d5ce9a..92d086d 100644
--- a/client/src/shared/components/Select/Dropdown.jsx
+++ b/client/src/shared/components/Select/Dropdown.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import { uniq } from 'lodash';
 
@@ -47,6 +47,18 @@ const SelectDropdown = ({
 
   const $optionsRef = useRef();
 
+  useLayoutEffect(() => {
+    const setFirstOptionAsActive = () => {
+      const $active = getActiveOptionNode();
+      if ($active) $active.classList.remove(activeOptionClass);
+
+      if ($optionsRef.current.firstElementChild) {
+        $optionsRef.current.firstElementChild.classList.add(activeOptionClass);
+      }
+    };
+    setFirstOptionAsActive();
+  });
+
   const selectOptionValue = optionValue => {
     deactivateDropdown();
     if (isMulti) {
@@ -139,7 +151,7 @@ const SelectDropdown = ({
   const handleOptionMouseEnter = event => {
     const $active = getActiveOptionNode();
     if ($active) $active.classList.remove(activeOptionClass);
-    event.target.classList.add(activeOptionClass);
+    event.currentTarget.classList.add(activeOptionClass);
   };
 
   const getActiveOptionNode = () => $optionsRef.current.querySelector(`.${activeOptionClass}`);
@@ -161,10 +173,9 @@ const SelectDropdown = ({
   const isSearchValueInOptions = options.map(option => option.label).includes(searchValue);
   const isOptionCreatable = onCreate && searchValue && !isSearchValueInOptions;
 
-  const renderSelectableOption = (option, i) => (
+  const renderSelectableOption = option => (
     <Option
       key={option.value}
-      className={i === 0 ? activeOptionClass : undefined}
       data-select-option-value={option.value}
       onMouseEnter={handleOptionMouseEnter}
       onClick={() => selectOptionValue(option.value)}
@@ -175,7 +186,6 @@ const SelectDropdown = ({
 
   const renderCreatableOption = () => (
     <Option
-      className={filteredOptions.length === 0 ? activeOptionClass : undefined}
       data-create-option-label={searchValue}
       onMouseEnter={handleOptionMouseEnter}
       onClick={() => createOption(searchValue)}