fix: onchange and border

.changeset/thick-olives-refuse.md

@@ -0,0 +1,8 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`<SelectInputV2 />`: 
+- onChange handle on checkboxes fix
+- visual indication of focused item for keyboard users
+- no scroll when opening the dropdown with "Enter"

packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap

@@ -419,14 +419,14 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   margin-right: 0.25rem;
   color: #3f4250;
   border-radius: 0.25rem;
+  border: 1px transparent solid;
 }
 
 .emotion-32:hover,
 .emotion-32:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
-  outline: none;
 }
 
 .emotion-32[aria-selected='true'] {

packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap

@@ -4467,14 +4467,14 @@ exports[`Pagination > should work correctly with perPage 1`] = `
   margin-right: 0.25rem;
   color: #3f4250;
   border-radius: 0.25rem;
+  border: 1px transparent solid;
 }
 
 .emotion-31:hover,
 .emotion-31:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
-  outline: none;
 }
 
 .emotion-31[aria-selected='true'] {
@@ -4888,7 +4888,6 @@ exports[`Pagination > should work correctly with perPage 1`] = `
                   data-grouped="false"
                   id="select-dropdown"
                   role="listbox"
-                  tabindex="-1"
                 >
                   <div
                     class="emotion-29 emotion-1"

packages/ui/src/components/SelectInputV2/Dropdown.tsx

@@ -128,12 +128,12 @@
 
   color:  ${({ theme }) => theme.colors.neutral.text};
   border-radius: ${({ theme }) => theme.radii.default};
+  border: 1px transparent solid;
 
   &:hover, :focus {
     background-color: ${({ theme }) => theme.colors.primary.background};
     color: ${({ theme }) => theme.colors.primary.text};
     cursor: pointer;
-    outline: none;
   }
 
   &[aria-selected='true'] {
@@ -213,6 +213,11 @@
     event.preventDefault()
     moveFocusUp()
   }
+
+  if (event.key === ' ') {
+    // No scroll
+    event.preventDefault()
+  }
 }
 
 const handleKeyDown = (
@@ -404,6 +409,7 @@
                   value="select-all"
                   data-testid="select-all-checkbox"
                   tabIndex={-1}
+                  onChange={selectAllOptions}
                 >
                   <Stack direction="column">
                     <Text as="span" variant="body" placement="left">
@@ -452,8 +458,16 @@
                           value={group}
                           data-testid="select-group"
                           tabIndex={-1}
+                          onChange={() =>
+                            selectAllGroup ? handleSelectGroup(group) : null
+                          }
                         >
-                          <Text variant="caption" as="span" placement="left">
+                          <Text
+                            variant="caption"
+                            as="span"
+                            placement="left"
+                            sentiment="neutral"
+                          >
                             {group.toUpperCase()}
                           </Text>
                         </StyledCheckbox>
@@ -511,6 +525,11 @@
                         disabled={option.disabled}
                         value={option.value}
                         tabIndex={-1}
+                        onChange={() => {
+                          if (!option.disabled) {
+                            handleClick(option, group)
+                          }
+                        }}
                       >
                         <DisplayOption
                           option={option}
@@ -537,7 +556,6 @@
   ) : (
     <DropdownContainer
       role="listbox"
-      tabIndex={-1}
       id="select-dropdown"
       onKeyDown={handleKeyDownSelect}
       gap={0.25}
@@ -563,6 +581,7 @@
               value="select-all"
               data-testid="select-all-checkbox"
               tabIndex={-1}
+              onChange={selectAllOptions}
             >
               <Stack direction="column">
                 <Text as="span" variant="body" placement="left">
@@ -623,6 +642,11 @@
                   disabled={option.disabled}
                   value={option.value}
                   tabIndex={-1}
+                  onChange={() => {
+                    if (!option.disabled) {
+                      handleClick(option)
+                    }
+                  }}
                 >
                   <DisplayOption
                     option={option}

packages/ui/src/components/SelectInputV2/SearchBarDropdown.tsx

@@ -129,6 +129,8 @@
           onChange?.(selectedData.selectedValues[0] ?? '')
         }
       }
+    } else if (key === 'Tab') {
+      searchInputRef.current?.blur()
     }
   }
 

packages/ui/src/components/SelectInputV2/SelectBar.tsx

@@ -371,6 +371,9 @@
               document.getElementById(`option-0`)?.focus()
             }
           }
+          if (event.key === ' ') {
+            event.preventDefault()
+          }
 
           return ['Enter', ' '].includes(event.key) && openable
             ? setIsDropdownVisible(!isDropdownVisible)

packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap

@@ -1002,14 +1002,14 @@ exports[`UnitInput > renders click 1`] = `
   margin-right: 0.25rem;
   color: #3f4250;
   border-radius: 0.25rem;
+  border: 1px transparent solid;
 }
 
 .emotion-33:hover,
 .emotion-33:focus {
   background-color: #f1eefc;
   color: #641cb3;
   cursor: pointer;
-  outline: none;
 }
 
 .emotion-33[aria-selected='true'] {
@@ -1171,7 +1171,6 @@ exports[`UnitInput > renders click 1`] = `
                   data-grouped="false"
                   id="select-dropdown"
                   role="listbox"
-                  tabindex="-1"
                 >
                   <div
                     class="emotion-31 emotion-1"