fix(machine/combobox): use value context with clearTriggerProps h…

…idden check (chakra-ui#1324) fix(machine/combobox): initialize default value with `clearTriggerProps` check
colinlienard · Jun 18, 2024 · 823c3c1 · 823c3c1
1 parent f64824d
commit 823c3c1
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/stale-waves-kiss.md b/.changeset/stale-waves-kiss.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/combobox": patch
+---
+
+Fixes issue where on load -- if the user set initial `value` to context -- `value` should be used to check whether a
+trigger button using `clearTriggerProps` should be visible on the page.
diff --git a/examples/next-ts/pages/combobox.tsx b/examples/next-ts/pages/combobox.tsx
@@ -47,6 +47,7 @@ export default function Page() {
           <button data-testid="clear-value-button" onClick={() => api.clearValue()}>
             Clear Value
           </button>
+          <button {...api.clearTriggerProps}>Clear Trigger</button>
           <br />
           <div {...api.rootProps}>
             <label {...api.labelProps}>Select country</label>

diff --git a/examples/nuxt-ts/pages/combobox.vue b/examples/nuxt-ts/pages/combobox.vue
@@ -42,7 +42,7 @@ const api = computed(() => combobox.connect(state.value, send, normalizeProps))
     <div>
       <button @click="() => api.setValue(['TG'])">Set to Togo</button>
       <button data-testid="clear-value-button" @click="api.clearValue">Clear Value</button>
-
+      <button v-bind="api.clearTriggerProps">Clear Trigger</button>
       <br />
 
       <div v-bind="api.rootProps">

diff --git a/examples/solid-ts/src/pages/combobox.tsx b/examples/solid-ts/src/pages/combobox.tsx
@@ -49,6 +49,7 @@ export default function Page() {
           <button data-testid="clear-value-button" onClick={() => api().clearValue()}>
             Clear Value
           </button>
+          <button {...api().clearTriggerProps}>Clear Trigger</button>
           <br />
 
           <div {...api().rootProps}>

diff --git a/examples/vue-ts/src/pages/combobox.tsx b/examples/vue-ts/src/pages/combobox.tsx
@@ -52,6 +52,7 @@ export default defineComponent({
               <button data-testid="clear-value-button" onClick={() => api.clearValue()}>
                 Clear Value
               </button>
+              <button {...api.clearTriggerProps}>Clear Trigger</button>
 
               <br />
 

diff --git a/packages/machines/combobox/src/combobox.connect.ts b/packages/machines/combobox/src/combobox.connect.ts
@@ -276,7 +276,7 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       tabIndex: -1,
       disabled: isDisabled,
       "aria-label": translations.clearTriggerLabel,
-      hidden: state.context.isInputValueEmpty,
+      hidden: !state.context.value.length,
       onPointerDown(event) {
         const evt = getNativeEvent(event)
         if (!isInteractive || !isLeftClick(evt)) return

diff --git a/packages/machines/combobox/src/combobox.machine.ts b/packages/machines/combobox/src/combobox.machine.ts
@@ -45,7 +45,6 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
           ...ctx.translations,
         },
       },
-
       computed: {
         isInputValueEmpty: (ctx) => ctx.inputValue.length === 0,
         isInteractive: (ctx) => !(ctx.readOnly || ctx.disabled),
@@ -633,7 +632,6 @@ const set = {
       invoke.selectionChange(ctx)
       return
     }
-
     ctx.value = ctx.multiple ? addOrRemove(ctx.value, value!) : [value!]
     invoke.selectionChange(ctx)
   },