SW-1519 Dropdown menu doesn't disappear when you tab to the next field (#532)

Author: constanzauanini

src/components/Select/SelectT.tsx

@@ -197,18 +197,22 @@ export default function SelectT<T>(props: SelectTProps<T>): JSX.Element {
   };
 
   const onKeyDownHandler = (e: KeyboardEvent<HTMLInputElement>) => {
-    const pressedLetter = e.key.toUpperCase();
-    const items = dropdownRef.current?.getElementsByTagName('li');
-    if (items) {
-      const arrayOfItems = Array.from(items);
-      for (const item of arrayOfItems) {
-        if (item.dataset.key === pressedLetter) {
-          item.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-          });
+    if (e.key === 'Tab') {
+      toggleOptions();
+    } else {
+      const pressedLetter = e.key.toUpperCase();
+      const items = dropdownRef.current?.getElementsByTagName('li');
+      if (items) {
+        const arrayOfItems = Array.from(items);
+        for (const item of arrayOfItems) {
+          if (item.dataset.key === pressedLetter) {
+            item.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start',
+            });
 
-          return;
+            return;
+          }
         }
       }
     }

src/stories/Select.stories.tsx

@@ -34,6 +34,7 @@ const EditableTemplate: Story<SelectProps> = (args) => {
       <Box height='1000px'>
         <Box width='200px' margin='0 auto'>
           <Select {...args} onChange={handleChange} selectedValue={value} options={options} />
+          <input />
         </Box>
       </Box>
     </Box>