k4rli/fauxjira
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed a select component bug

Browse Source
This commit is contained in:
ireic
2019-12-27 17:35:00 +01:00
parent 2fb374b082
commit 821547e1ad
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/shared/components/Select/Dropdown.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useRef } from 'react'; import React, { useState, useRef, useLayoutEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { uniq } from 'lodash'; import { uniq } from 'lodash';
@@ -47,6 +47,18 @@ const SelectDropdown = ({
const $optionsRef = useRef(); 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 => { const selectOptionValue = optionValue => {
deactivateDropdown(); deactivateDropdown();
if (isMulti) { if (isMulti) {
@@ -139,7 +151,7 @@ const SelectDropdown = ({
const handleOptionMouseEnter = event => { const handleOptionMouseEnter = event => {
const $active = getActiveOptionNode(); const $active = getActiveOptionNode();
if ($active) $active.classList.remove(activeOptionClass); if ($active) $active.classList.remove(activeOptionClass);
event.target.classList.add(activeOptionClass); event.currentTarget.classList.add(activeOptionClass);
}; };
const getActiveOptionNode = () => $optionsRef.current.querySelector(`.${activeOptionClass}`); const getActiveOptionNode = () => $optionsRef.current.querySelector(`.${activeOptionClass}`);
@@ -161,10 +173,9 @@ const SelectDropdown = ({
const isSearchValueInOptions = options.map(option => option.label).includes(searchValue); const isSearchValueInOptions = options.map(option => option.label).includes(searchValue);
const isOptionCreatable = onCreate && searchValue && !isSearchValueInOptions; const isOptionCreatable = onCreate && searchValue && !isSearchValueInOptions;
const renderSelectableOption = (option, i) => ( const renderSelectableOption = option => (
<Option <Option
key={option.value} key={option.value}
className={i === 0 ? activeOptionClass : undefined}
data-select-option-value={option.value} data-select-option-value={option.value}
onMouseEnter={handleOptionMouseEnter} onMouseEnter={handleOptionMouseEnter}
onClick={() => selectOptionValue(option.value)} onClick={() => selectOptionValue(option.value)}
@@ -175,7 +186,6 @@ const SelectDropdown = ({
const renderCreatableOption = () => ( const renderCreatableOption = () => (
<Option <Option
className={filteredOptions.length === 0 ? activeOptionClass : undefined}
data-create-option-label={searchValue} data-create-option-label={searchValue}
onMouseEnter={handleOptionMouseEnter} onMouseEnter={handleOptionMouseEnter}
onClick={() => createOption(searchValue)} onClick={() => createOption(searchValue)}