fix: SelectBox bug (#404)

Author: mitrotasios

src/components/input-elements/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { HoveredValueContext, SelectedValueContext } from "contexts";
@@ -55,7 +55,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>((props, ref) =>
   const dropdownRef = useRef(null);
 
   const Icon = icon;
-  const valueToNameMapping = constructValueToNameMapping(children);
+  const valueToNameMapping = useMemo(() => constructValueToNameMapping(children), [children]);
   const optionValues = React.Children.map(
     children,
     (child: { props: DropdownItemProps }) => child.props.value,

src/components/input-elements/SelectBox/SelectBox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { ArrowDownHeadIcon } from "assets";
@@ -55,16 +55,16 @@ const SelectBox = React.forwardRef<HTMLDivElement, SelectBoxProps>((props, ref)
     onKeyDown,
     ...other
   } = props;
+  const valueToNameMapping = useMemo(() => constructValueToNameMapping(children), [children]);
 
   const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
-  const [inputValue, setInputValue] = useState("");
+  const [inputValue, setInputValue] = useState(valueToNameMapping.get(selectedValue || "") || "");
   const [searchQuery, setSearchQuery] = useState("");
   const [isFocused, setIsFocused] = useState(false);
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const Icon = icon;
-  const valueToNameMapping = constructValueToNameMapping(children);
   const hasSelection = hasValue(selectedValue);
 
   useEffect(() => {
@@ -85,13 +85,17 @@ const SelectBox = React.forwardRef<HTMLDivElement, SelectBoxProps>((props, ref)
       inputRef.current?.blur();
     } else {
       inputRef.current?.focus();
+      if (inputRef.current) {
+        inputRef.current.selectionStart = inputRef.current.value.length;
+        inputRef.current.selectionEnd = inputRef.current.value.length;
+      }
     }
     setIsFocused(isFocused);
   };
 
   const handleValueChange = (value: string) => {
     setSearchQuery("");
-    if (selectedValue !== undefined) setInputValue(valueToNameMapping.get(selectedValue) || "");
+    if (value !== undefined) setInputValue(valueToNameMapping.get(value) || "");
     handleFocusChange(false);
     setSelectedValue(value);
     inputRef.current?.blur();

src/stories/input-elements/Dropdown.stories.tsx

@@ -92,11 +92,15 @@ const WithControlledStateTemplate: ComponentStory<typeof Dropdown> = () => {
       </Dropdown>
       <Button onClick={() => setValue("")}>Reset</Button>
       <Button onClick={() => setValue("1")}>Set to One</Button>
+      <Text>{value}</Text>
     </Card>
   );
 };
 
 export const DefaultResponsive = ResponsiveTemplate.bind({});
+DefaultResponsive.args = {
+  onValueChange: (v) => alert(v),
+};
 
 export const WithFlexParent = FlexTemplate.bind({});
 WithFlexParent.args = {

src/stories/input-elements/SelectBox.stories.tsx

@@ -94,6 +94,7 @@ const WithControlledStateTemplate: ComponentStory<typeof SelectBox> = () => {
       </SelectBox>
       <Button onClick={() => setValue("")}>Reset</Button>
       <Button onClick={() => setValue("1")}>One</Button>
+      <Text>{value}</Text>
     </Card>
   );
 };