fix select and autocomplete disabled UI issue.

scheduleonce · Sep 30, 2024 · 703f0ad · 703f0ad
1 parent e38024c
commit 703f0ad
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.19",
+  "version": "1.4.20-beta.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"

diff --git a/src/lib/components/select/auto-complete.tsx b/src/lib/components/select/auto-complete.tsx
@@ -159,7 +159,7 @@ export const AutoComplete: FC<Props> = ({
     <Combobox value={selected} onChange={onSelection} disabled={disable}>
       {({ open }) => (
         <div className={styles.autocomplete}>
-          <div ref={selectRef} className={`${styles.autocompleteContainer} ${disable ? 'disable' : ''}`}>
+          <div ref={selectRef} className={`${styles.autocompleteContainer} ${disable ? styles.disable : ''}`}>
             <Combobox.Input
               ref={inputRef}
               data-testid={'select-input'}
@@ -187,7 +187,10 @@ export const AutoComplete: FC<Props> = ({
               ref={inputButton}
               onClick={getDropdownPosition}
             >
-              <ChevronDownIcon className={`${styles.chevronDownIcon} ${disable ? 'disable' : ''}`} aria-hidden="true" />
+              <ChevronDownIcon
+                className={`${styles.chevronDownIcon} ${disable ? styles.disable : ''}`}
+                aria-hidden="true"
+              />
             </Combobox.Button>
           </div>
           {isMounted

diff --git a/src/lib/components/select/select.tsx b/src/lib/components/select/select.tsx
@@ -124,7 +124,7 @@ export const Select: FC<Props> = ({ children, selected, onSelect, themeColor })
                 }
               }}
               style={{ borderBottomColor: themeColor && (isFocused || open) ? borderColor : '' }}
-              className={`${styles.selectButton} ${open ? ' open' : ''}`}
+              className={`${styles.selectButton} ${open ? styles.open : ''}`}
             >
               {selected && (
                 <span className={styles.selectValue}>