Autocomplete: onClear event handler

[xmlking]

Describe the feature in detail (code, mocks, or screenshots encouraged)

I wonder if there is already a solution to trap clear event (clicking the black x) in the input box

I tried to implement with on:change, but it sub-optimally works. I have to click outside after I clear the input via black close Icon.

const onChange: FormEventHandler<HTMLInputElement> = async (e) => {
  const value = e.currentTarget.value;
  console.log(`on Change: ${value}`)
   if (value === "") {
    clearSubject();
   }
}

What type of pull request would this be?

None

Provide relevant links or additional information.

Source: https://github.com/xmlking/spectacular/blob/main/apps/console/src/routes/(app)/policies/components/search-policies-form.svelte

<!-- Form -->
<form data-sveltekit-noscroll bind:this={searchForm}>
  <AppBar
    gridColumns="grid-cols-3"
    slotLead="place-content-start !justify-start"
    slotTrail="place-content-end"
  >
    <svelte:fragment slot="lead">
      <ShieldCheckIcon />
      <h3 class="h3 pl-2 hidden md:block">Policies</h3>
    </svelte:fragment>

    <div
      class="input-group input-group-divider grid-cols-[auto_1fr_auto]"
      class:input-error={invalid}
      use:popup={popupSettings}
    >
      <div class="input-group-shim" class:input-error={invalid}>
        <SearchIcon size={17} />
      </div>
      <Form.Field {form} name="subjectDisplayName">
        <Form.Control let:attrs>
          <input
            type="search"
            class="data-[fs-error]:input-error hidden md:block"
            placeholder="Subject Display Name"
            autocomplete="off"
       spellcheck="false"
       autocorrect="off"
            on:change={onChange}
            on:input={onInput}
            {...attrs}
            bind:value={$formData.subjectDisplayName}
          />
        </Form.Control>
      </Form.Field>
      <Form.Field {form} name="subjectType">
        <Form.Control let:attrs>
          <select
            class="data-[fs-error]:input-error"
            bind:value={$formData.subjectType}
            on:change={clearSubject}
            {...attrs}
            {...$constraints.subjectType}
          >
            <option value="user">User</option>
            <option value="group">Group</option>
            <option value="service_account">Service</option>
            <option value="device">Device</option>
            <option value="device_pool">D Pool</option>
          </select>
        </Form.Control>
      </Form.Field>
    </div>
    <div
      class="card w-full max-w-sm max-h-48 p-4 overflow-y-auto z-10"
      data-popup="popupAutocomplete"
      tabindex="-1"
    >
      <Autocomplete
        bind:input={$formData.subjectDisplayName}
        options={subjects?.map((subject) => ({
          label: subject.displayName,
          value: subject,
          keywords: "",
        }))}
        on:selection={onSelect}
      />
    </div>

    <svelte:fragment slot="trail">
      <a
        href="/policies/create"
        class="btn variant-filled"
        data-sveltekit-preload-data="hover">Add Policy</a
      >
    </svelte:fragment>
  </AppBar>
  <input name="subjectId" bind:value={$formData.subjectId} type="hidden" />
  <input name="limit" bind:value={$formData.limit} type="hidden" />
  <input name="offset" bind:value={$formData.offset} type="hidden" />
  <ErrorMessage error={$errors?.subjectType?.[0]} />
  <ErrorMessage error={$errors?.subjectId?.[0]} />
  <ErrorMessage error={$errors?.subjectDisplayName?.[0]} />
  <ErrorMessage error={$errors?.limit?.[0]} />
  <ErrorMessage error={$errors?.offset?.[0]} />
</form>

[endigo9740]

Hi @xmlking, unfortunately that's not a Skeleton feature. That's just part of the native inputs in Chrome and/or webkit based browsers. I would imagine there's a way to do it, but I'm not sure off hand.

The only interaction Skeleton has this with this feature is related to styling. You can see the selector here. Maybe this will help? https://github.com/skeletonlabs/skeleton/blob/master/packages/plugin/src/styles/base/forms.css#L29

Unfortunately this is outside of the scope of things we cover for Skeleton support, so I'll be closing this issue. But good luck!