@loadsmart/loadsmart-ui 6.0.8 → 6.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "6.0.8",
+	"version": "6.0.9",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [

package/src/components/Select/Select.test.tsx

@@ -191,6 +191,7 @@ describe('Select', () => {
 
         expect(onBlur).toHaveBeenNthCalledWith(1, new MouseEvent('mousedown'))
         expect(onBlur).toHaveBeenNthCalledWith(2, new KeyboardEvent('keyup'))
+        expect(selectEvent.isMenuExpanded(selectInput)).toBe(false)
       })
 
       it('shrinks when an option is selected', async () => {
@@ -314,6 +315,7 @@ describe('Select', () => {
 
         expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(0)
         expect(searchInput).toHaveDisplayValue('')
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
       })
 
       it('removes the clear button', async () => {

package/src/components/Select/useSelect.ts

@@ -30,6 +30,7 @@ import type {
   SelectDatasourceFunction,
   SelectProps,
   SelectStatus,
+  SelectValue,
   useSelectReturn,
 } from './Select.types'
 
@@ -223,7 +224,7 @@ function useSelect(props: SelectProps): useSelectReturn {
     multiple,
     adapters,
     onChange: useCallback(
-      function handleSelectionChange(selected) {
+      function handleSelectionChange(selected: SelectValue) {
         onChange?.({ target: { id, name, value: getValue(selected, multiple) } })
       },
       [id, multiple, name, onChange]
@@ -303,13 +304,14 @@ function useSelect(props: SelectProps): useSelectReturn {
         toggle: dropdown.toggle,
         expanded: dropdown.expanded,
         onBlur(event?: MouseEvent | TouchEvent | KeyboardEvent) {
+          setQueryTyped(false)
+
           if (!multiple) {
             setQuery(getDisplayValue(adapters, selectable.selected, multiple))
           } else {
             setQuery('')
           }
           options.reset()
-
           onBlur?.(event)
         },
         expandDisabled,
@@ -338,10 +340,11 @@ function useSelect(props: SelectProps): useSelectReturn {
         },
         value: query,
         onChange(e: ChangeEvent<HTMLInputElement>) {
-          onQueryChange?.(e)
+          const sanitizedValue = e.target.value.replace(/\s+/, '')
 
+          setQueryTyped(sanitizedValue !== '')
+          onQueryChange?.(e)
           setQuery(e.target.value)
-          setQueryTyped(true)
         },
         onFocus: TriggerOnFocusHandler,
       }
@@ -353,10 +356,10 @@ function useSelect(props: SelectProps): useSelectReturn {
     function getClearProps() {
       return {
         onClick() {
+          setQueryTyped(false)
           setQuery('')
           selectable.clear()
           options.reset()
-
           triggerRef.current?.focus()
         },
       }