rerender on option update &options transition removed

Author: Arif-un

src/Options.jsx

@@ -1,6 +1,14 @@
 import React from 'react'
 
-function Options({ opts, singleSelect, addValue, checkValueExist, value, largeData, menuOpen }) {
+function Options({
+  opts,
+  singleSelect,
+  addValue,
+  checkValueExist,
+  value,
+  largeData,
+  menuOpen
+}) {
   if (largeData && !menuOpen) return null
   const optsArr = []
   function addInArr(opts) {
@@ -49,7 +57,7 @@ function Options({ opts, singleSelect, addValue, checkValueExist, value, largeDa
     }
   }
   addInArr(opts)
-  return optsArr
+  return <div>{optsArr}</div>
 }
 
 export default Options

src/index.js

@@ -56,8 +56,7 @@ function MultiSelect({
   const [value, setValue] = useState([])
   const [options, setOptions] = useState(userOptions || [])
   const [search, setSearch] = useState(null)
-  const inputFld = useRef()
-
+  const inputFld = useRef(null)
   let stopPropagation = true
 
   const preparDefaultValue = (defaultValue) => {
@@ -111,6 +110,10 @@ function MultiSelect({
     )
   }
 
+  useEffect(() => {
+    setOptions(userOptions)
+  }, [userOptions])
+
   useEffect(() => {
     let preDefinedValue = []
     if (defaultValue !== '' || defaultValue.length > 0) {
@@ -351,7 +354,6 @@ function MultiSelect({
       setSearch(null)
     }
   }
-
   return (
     <div
       {...attr}

src/styles.css

@@ -96,7 +96,6 @@
   background: white;
   max-height: 0;
   overflow: auto;
-  transition: max-height 100ms ease-in;
 }
 .msl-options::-webkit-scrollbar {
   width: 8px;
@@ -113,7 +112,7 @@
 .msl-options::-webkit-scrollbar-thumb:hover {
   background: rgb(0, 0, 0, 0.2);
 }
-.msl-options > .msl-option,
+.msl-options .msl-option,
 .msl-grp-title {
   font-size: var(--font-size);
   border-radius: calc(var(--border-radius) - 3px);
@@ -122,9 +121,13 @@
   margin: 4px 6px 4px;
   line-break: anywhere;
   line-height: 1.2;
+  outline: none;
   white-space: break-spaces;
   transition: background 200ms;
 }
+.msl-option:focus-visible {
+  outline: 2px solid rgb(0, 119, 255);
+}
 
 .msl-grp-title {
   font-size: calc(var(--font-size) - 2px);
@@ -133,10 +136,10 @@
   opacity: 0.7;
 }
 
-.msl-options > .msl-option:last-child {
+.msl-options .msl-option:last-child {
   margin-bottom: 5px;
 }
-.msl-options > .msl-option:hover,
+.msl-options .msl-option:hover,
 .msl-option:focus {
   background: var(--option-bg-hover);
 }