Add id to searchable select (viamrobotics#524)

micheal-parks · Jun 3, 2024 · b5621ea · b5621ea
1 parent c6b4af0
commit b5621ea
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.121",
+  "version": "0.0.122",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/select/searchable-select.svelte b/packages/core/src/lib/select/searchable-select.svelte
@@ -42,6 +42,9 @@ export let values: string[] = [];
 /** The placeholder of the input. */
 export let placeholder = '';
 
+/** Optional id used in parent label `for` attribute */
+export let id: string | undefined = undefined;
+
 /**
  * Whether value must be constrained to `options` on change.
  * - `false` (Default) - any value may be selected
@@ -307,6 +310,7 @@ const handleKeydown = createHandleKey({
   menuId={LIST_ID}
   isOpen={isExpanded}
   isFocused={menuState === FOCUS_ITEM ? false : undefined}
+  {id}
   cx={[{ 'caret-transparent': menuState === FOCUS_ITEM }, inputCx]}
   icon={selectedSearchOption?.icon}
   aria-autocomplete="list"

diff --git a/packages/core/src/lib/select/select-input.svelte b/packages/core/src/lib/select/select-input.svelte
@@ -12,6 +12,9 @@ export let state: InputState = InputStates.NONE;
 export let inputElement: HTMLInputElement | undefined = undefined;
 export let icon: IconName | undefined = undefined;
 
+/** Optional id used in parent label `for` attribute */
+export let id: string | undefined = undefined;
+
 /** Additional CSS classes to pass to the input. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
@@ -61,6 +64,7 @@ $: errorClasses =
   <input
     bind:value
     bind:this={inputElement}
+    {id}
     role="combobox"
     readonly={disabled ? true : undefined}
     aria-controls={menuId}

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -1065,18 +1065,30 @@ const onHoverDelayMsInput = (event: Event) => {
       />
     </Label>
 
-    <div>
+    <div class="flex flex-col gap-1">
       <Label
         for="targetID"
         cx="whitespace-nowrap"
       >
-        For attribute example
+        For attribute example with SearchableSelect
       </Label>
-      <Input
-        cx="max-w-[70px]"
-        id="targetID"
-        name="name"
-      />
+      <div class="max-w-fit">
+        <SearchableSelect
+          id="targetID"
+          exclusive
+          options={[
+            { value: 'First Option', description: 'First option' },
+            'Option 2',
+            { value: 'C.) Option', description: 'second' },
+            'A really long forth option just in case you need it',
+          ]}
+          placeholder="Select an option"
+          onChange={(value) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected', value);
+          }}
+        />
+      </div>
     </div>
   </div>