Change logic for one more click option

Author: pbuba

example/Dropdown.tsx

@@ -43,7 +43,7 @@ export const Dropdown: React.FC<Props> = ({onSelect, value}) => {
   }
 
   const options = useMemo(() => {
-    return items.filter(item => item.name.includes(inputValue));
+    return items.filter(item => item.name.toLowerCase().includes(inputValue.toLowerCase()));
   }, [inputValue])
 
   const {

example/MultiSelect/MultiSelect.tsx

@@ -1,7 +1,6 @@
-import React, {ChangeEvent, KeyboardEvent, useMemo, useState} from 'react';
-import ReactDOM from 'react-dom';
 import classNames from 'classnames';
-import {useDropdown} from '../../src';
+import React, { ChangeEvent, KeyboardEvent, useMemo, useState } from 'react';
+import { useDropdown } from '../../src';
 import './MultiSelect.css';
 
 export type Item = {
@@ -12,62 +11,63 @@ export type Item = {
 type Props = {
   onSelect: (items: Item[]) => void;
   values?: Item[];
-}
+};
 
 const items: Item[] = [
   {
     name: 'NewYork',
-    value: 'NewYork'
+    value: 'NewYork',
   },
   {
     name: 'Moscow',
-    value: 'Moscow'
+    value: 'Moscow',
   },
   {
     name: 'London',
-    value: 'London'
+    value: 'London',
   },
   {
     name: 'Amsterdam',
-    value: 'Amsterdam'
+    value: 'Amsterdam',
   },
   {
     name: 'Tokyo',
-    value: 'Tokyo'
+    value: 'Tokyo',
   },
   {
     name: 'Toronto',
-    value: 'Toronto'
+    value: 'Toronto',
   },
   {
     name: 'Cape Town',
-    value: 'Cape Town'
+    value: 'Cape Town',
   },
   {
     name: 'Rio de Janeiro',
-    value: 'Rio de Janeiro'
+    value: 'Rio de Janeiro',
   },
 ];
 
-
-
-export const Dropdown: React.FC<Props> = ({onSelect, values}) => {
+export const Dropdown: React.FC<Props> = ({ onSelect, values }) => {
   const [inputValue, setInputValue] = useState<string>('');
   const [selectedOptions, setSelected] = useState<Item[]>(values);
+  const [isFocused, setFocused] = useState<Boolean>(false);
 
   const handleSelect = (item: Item) => {
-    if (selectedOptions.some(el => el.value === item.value)) {
-      return;
+    let newOptions = [];
+    if (selectedOptions.some((el) => el.value === item.value)) {
+      newOptions = selectedOptions.filter((el) => el.value !== item.value);
+    } else {
+      newOptions = [...selectedOptions, item];
     }
 
-    const newArr = [...selectedOptions, item];
-    setSelected(newArr);
-    onSelect(newArr);
-  }
+    setSelected(newOptions);
+    onSelect(newOptions);
+  };
 
   const options = useMemo(() => {
-    return items.filter(item => item.name.includes(inputValue));
-  }, [inputValue])
+    return items.filter((item) => item.name.toLowerCase().includes(inputValue.toLowerCase()));
+  }, [inputValue]);
 
   const {
     isOpen,
@@ -77,7 +77,7 @@ export const Dropdown: React.FC<Props> = ({onSelect, values}) => {
     getMenuProps,
     getItemProps,
     setOpen,
-  } = useDropdown<Item>({items: options, onSelect: handleSelect})
+  } = useDropdown<Item>({ items: options, onSelect: handleSelect });
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setOpen(true);
@@ -91,61 +91,80 @@ export const Dropdown: React.FC<Props> = ({onSelect, values}) => {
         setOpen(true);
         break;
     }
-  }
-
-  const handleBlur = () => {
-    setInputValue('');
-  }
+  };
 
   const handleCloseClick = (item: Item) => (event) => {
     event.stopPropagation();
-    const newArr = selectedOptions.filter(el => el.value !== item.value);
+    const newArr = selectedOptions.filter((el) => el.value !== item.value);
     setSelected(newArr);
     onSelect(newArr);
-  }
-
-  return <div className='wrapper' {...getWrapperProps()} onKeyDown={handleKeyDown} onBlur={handleBlur}>
-
-    {selectedOptions.length === 0 ? null :
-      selectedOptions.map((item: Item) => {
-        return (
-          <div className='multivalue' key={item.value}>
-            <span className='multivalue-name'>{item.name}</span>
-            <button type='button' className='remove' onClick={handleCloseClick(item)} aria-label={`Remove value ${item.name}`}></button>
-          </div>)
-      })
-    }
+  };
 
-    <input
-      className='input'
-      type="text" id="input" {...getInputProps()}
-      placeholder='Select city'
-      value={inputValue}
-      onChange={handleChange}
-      autoComplete='off'
-    />
-
-    {isOpen &&
-      <ul className='menu' {...getMenuProps() as any}>
-        {options.length === 0 ?
-          <li>No data</li>
-        : options.map(
-          (item: Item, index) =>
-            <li
-              key={item.value}
-              className={
-                classNames('item', {
-                  'active': highlightedIndex === index,
-                  'selected': selectedOptions.some(el => el.value === item.value),
-                })
-              }
-              {...getItemProps(item, index)}
-            >
-              {item.name}
-            </li>
-          )
-        }
-      </ul>
-    }
-  </div>
-}
+  const handleBlur = () => {
+    setInputValue('');
+    setFocused(false);
+  };
+
+  const handleFocus = () => {
+    setFocused(true);
+  };
+
+  return (
+    <div
+      className="wrapper"
+      {...getWrapperProps()}
+      onKeyDown={handleKeyDown}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {selectedOptions.length === 0
+        ? null
+        : selectedOptions.map((item: Item) => {
+            return (
+              <div className="multivalue" key={item.value}>
+                <span className="multivalue-name">{item.name}</span>
+                <button
+                  type="button"
+                  className="remove"
+                  onClick={handleCloseClick(item)}
+                  tabIndex={isFocused ? 0 : -1}
+                  aria-label={`Remove value ${item.name}`}
+                ></button>
+              </div>
+            );
+          })}
+
+      <input
+        className="input"
+        type="text"
+        id="input"
+        {...getInputProps()}
+        placeholder="Select city"
+        value={inputValue}
+        onChange={handleChange}
+        autoComplete="off"
+      />
+
+      {isOpen && (
+        <ul className="menu" {...(getMenuProps() as any)}>
+          {options.length === 0 ? (
+            <li>No data</li>
+          ) : (
+            options.map((item: Item, index) => (
+              <li
+                key={item.value}
+                className={classNames('item', {
+                  active: highlightedIndex === index,
+                  selected: selectedOptions.some((el) => el.value === item.value),
+                })}
+                {...getItemProps(item, index)}
+              >
+                {item.name}
+              </li>
+            ))
+          )}
+        </ul>
+      )}
+    </div>
+  );
+};

stories/Multiselect.stories.tsx

@@ -1,27 +1,23 @@
-import React, { useState } from 'react';
-
 import { Meta } from '@storybook/react';
-
+import React, { useState } from 'react';
 import { Dropdown, Item } from '../example/MultiSelect/MultiSelect';
 
 export default {
   title: 'Components/Dropdown',
   component: Dropdown,
 } as Meta;
 
-
-
 export const MultiSelect = () => {
   const [values, setValues] = useState<Item[]>([]);
 
   const onSelect = (items: Item[]) => {
     setValues(items);
-  }
+  };
 
   return (
-  <>
-    <Dropdown onSelect={onSelect} values={values} />
-    {values.map(item => item.name + ' ')}
-  </>);
-}
-
+    <>
+      <Dropdown onSelect={onSelect} values={values} />
+      {values.map((item) => item.name + ' ')}
+    </>
+  );
+};