fix: Avoid submitting form when MultiSelect state changes

Signed-off-by: Noble Mittal <noblemittal@outlook.com>
vitessio · Sep 14, 2024 · ae379cc · ae379cc
1 parent 3084278
commit ae379cc
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 112 deletions.
diff --git a/web/vtadmin/src/components/TextInput.module.scss b/web/vtadmin/src/components/TextInput.module.scss
@@ -30,6 +30,7 @@ $iconPositionHorizontalLarge: 1.6rem;
     &:disabled {
         background: var(--backgroundSecondary);
         border-color: var(--backgroundSecondaryHighlight);
+        color: var(--colorDisabled);
         cursor: not-allowed;
     }
 

diff --git a/web/vtadmin/src/components/dropdown/MenuItem.tsx b/web/vtadmin/src/components/dropdown/MenuItem.tsx
@@ -13,7 +13,7 @@ const MenuItem: React.FC<MenuItemProps> = ({ children, disabled, className, inte
         <button
             disabled={disabled}
             onMouseDown={(e) => e.preventDefault()}
-            className={`transition-colors font-sans border-none text-left block px-6 py-4 disabled:bg-gray-100 hover:bg-gray-100 text-${intent} hover:text-${
+            className={`transition-colors font-sans border-none text-left block px-6 py-4 disabled:bg-gray-200 disbaled:text-secondary hover:bg-gray-100 text-${intent} hover:text-${
                 intent === Intent.none ? 'vtblue' : intent
             } w-full ${className || ''}`}
             role="menuitem"

diff --git a/web/vtadmin/src/components/inputs/MultiSelect.module.scss b/web/vtadmin/src/components/inputs/MultiSelect.module.scss
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- .container {
+.container {
     display: inline-block;
     position: relative;
 }
@@ -55,13 +55,6 @@
     cursor: not-allowed;
 }
 
-.large .toggle {
-    font-size: theme('fontSize.lg');
-    height: var(--inputHeightLarge);
-    min-width: 24rem;
-    padding: 0 16px;
-}
-
 .chevron {
     height: 20px;
     position: absolute;
@@ -85,14 +78,7 @@
     z-index: 1000;
 }
 
-.menu {
-    list-style-type: none;
-    margin: 0;
-    outline: none;
-    padding: 0;
-}
-
-.menuItem {
+.listItem {
     background: none;
     border: none;
     box-sizing: border-box;
@@ -114,49 +100,6 @@
         background: var(--backgroundPrimaryHighlight);
         cursor: pointer;
     }
-
-    &:active,
-    &:focus {
-        background: var(--backgroundPrimaryHighlight);
-    }
-}
-
-.clear {
-    background: none;
-    border: none;
-    box-sizing: border-box;
-    color: var(--textColorSecondary);
-    cursor: pointer;
-    display: block;
-    font-family: var(--fontFamilyPrimary);
-    font-size: var(--fontSizeBody);
-    min-width: 16rem;
-    padding: 4px 12px;
-    position: relative;
-    text-align: left;
-    transition: all 0.1s ease-in-out;
-    white-space: nowrap;
-    width: 100%;
-
-    &:hover,
-    &:active,
-    &:focus {
-        background: var(--backgroundPrimaryHighlight);
-    }
-}
-
-.large .clear {
-    font-size: theme('fontSize.lg');
-    padding: 8px 16px;
-}
-
-.emptyContainer {
-    outline: none;
-    padding: 8px 12px;
-}
-
-.emptyPlaceholder {
-    color: var(--textColorSecondary);
 }
 
 .selected {
@@ -165,4 +108,4 @@
     &:hover {
         background: var(--backgroundSecondaryHighlight);
     }
-}
+}
diff --git a/web/vtadmin/src/components/inputs/MultiSelect.tsx b/web/vtadmin/src/components/inputs/MultiSelect.tsx
@@ -27,7 +27,7 @@ interface Props<T> {
     items: T[];
     itemToString?: (item: T) => string;
     label: string;
-    setSelectedItems: (selectedItems: T[]) => void;
+    onChange: (selectedItems: T[]) => void;
     placeholder: string;
     renderItem?: (item: T) => JSX.Element | string;
     selectedItems: T[];
@@ -45,7 +45,7 @@ export const MultiSelect = <T,>({
     placeholder,
     renderItem,
     selectedItems,
-    setSelectedItems,
+    onChange,
     description,
     required,
 }: Props<T>) => {
@@ -56,42 +56,38 @@ export const MultiSelect = <T,>({
         return itemToString(item);
     };
 
-    const selectedItemsText = `Selected (${selectedItems.length}): ${selectedItems.map((item) => _renderItem(item)).join(', ')}`
+    const selectedItemsText = `Selected (${selectedItems.length}): ${selectedItems.map((item) => _renderItem(item)).join(', ')}`;
 
     return (
         <div className={cx(style.container, className, { [style.disabled]: disabled })}>
-            {label && (
-            <Label label={label} required={required} />
-            )}
+            {label && <Label label={label} required={required} />}
             {description && <div className="mt-[-4px] mb-4">{description}</div>}
 
-            <Listbox value={selectedItems} onChange={setSelectedItems}  multiple>
+            <Listbox value={selectedItems} onChange={onChange} multiple>
                 {({ open }) => (
                     <>
                         <Listbox.Button
-                            className={cx(style.toggle, inputClassName, { [style.open]: open, [style.disabled]: disabled })}
+                            className={cx(style.toggle, inputClassName, {
+                                [style.open]: open,
+                                [style.disabled]: disabled,
+                            })}
                         >
-                            {selectedItems.length > 0
-                                ? selectedItemsText
-                                : placeholder}
+                            {selectedItems.length > 0 ? selectedItemsText : placeholder}
                             <Icon className={style.chevron} icon={open ? Icons.chevronUp : Icons.chevronDown} />
                         </Listbox.Button>
                         <Listbox.Options className={cx(style.dropdown, { [style.hidden]: !open })}>
                             {items.map((item, index) => (
                                 <Listbox.Option
-                                    as="button"
                                     key={index}
                                     value={item}
                                     className={({ active, selected }) =>
-                                        cx(style.menuItem, {
+                                        cx(style.listItem, {
                                             [style.active]: active,
                                             [style.selected]: selected,
                                         })
                                     }
                                 >
-                                        <div>
-                                            {_renderItem(item)}
-                                        </div>
+                                    <div>{_renderItem(item)}</div>
                                 </Listbox.Option>
                             ))}
                         </Listbox.Options>