Click Editable Input Autofill#

An input field with autofill suggestions that is editable through double clicking. See the Click Editable Input API for the shared attributes, events and slots.

Example:

The <owc-click-editable-input-autofill> element is the input field with autofill options. Add options with a label and value property in the .data property. Add a default option with the value attribute.

export const simpleInputAutofillField = () => {
  return html`
    <owc-click-editable-input-autofill
      id="simpleInputAutofill"
      value="Grape"
      .data=${[
        { label: 'Apple', value: 'Apple' },
        { label: 'Banana', value: 'Banana' },
        { label: 'Grape', value: 'Grape' },
        { label: 'Strawberry', value: 'Strawberry' },
      ]}
    ></owc-click-editable-input-autofill>
  `;
};

Read Only#

Use the read-only attribute to set a field to be read only.

export const notEditableField = () => {
  return html`
    <owc-click-editable-input-autofill
      id="inputAutofill"
      value="Banana"
      read-only
      .data=${[
        { label: 'Apple', value: 'Apple' },
        { label: 'Banana', value: 'Banana' },
        { label: 'Grape', value: 'Grape' },
        { label: 'Strawberry', value: 'Strawberry' },
      ]}
    ></owc-click-editable-input-autofill>
  `;
};

Copy Button#

Use the show-copy-button attribute display a copy button next to the field.

export const copyButtonField = () => {
  return html`
    <owc-click-editable-input-autofill
      id="inputAutofill"
      value="Banana"
      show-copy-button
      .data=${[
        { label: 'Apple', value: 'Apple' },
        { label: 'Banana', value: 'Banana' },
        { label: 'Grape', value: 'Grape' },
        { label: 'Strawberry', value: 'Strawberry' },
      ]}
    ></owc-click-editable-input-autofill>
  `;
};

Custom Formatter#

To implement the custom formatter use the .formatter attribute and define a custom formatter function.

export const formatterField = () => {
  return html`
    <owc-click-editable-input-autofill
      id="inputAutofill"
      .formatter=${value => (value ? html`Selected Date: ${value}` : html`No Date Selected`)}
      .data=${[
        { label: 'Today', value: 'Today' },
        { label: 'Tomorrow', value: 'Tomorrow' },
        { label: 'Yesterday', value: 'Yesterday' },
      ]}
    ></owc-click-editable-input-autofill>
  `;
};

Label#

Use the label slot attribute to add a label.

export const labelInputAutofillField = () => {
  return html`
    <owc-click-editable-input-autofill
      id="multipleInputAutofill"
      value="Grape"
      .data=${[
        { label: 'Apple', value: 'Apple' },
        { label: 'Banana', value: 'Banana' },
        { label: 'Grape', value: 'Grape' },
        { label: 'Strawberry', value: 'Strawberry' },
      ]}
    >
      <div slot="label">Frut:</div>
    </owc-click-editable-input-autofill>
  `;
};

Edit externally#

To simulate a double click call a function that sets .editable and .open to true. In this case there is an edit button with an event handler. This will not be affected by the read-only attribute.

export const buttonInputAutofillField = () => {
  return html`
    <owc-click-editable-input-autofill
      id="buttonInputAutofill"
      .data=${[
        { label: 'Apple', value: 'Apple' },
        { label: 'Banana', value: 'Banana' },
        { label: 'Grape', value: 'Grape' },
        { label: 'Strawberry', value: 'Strawberry' },
      ]}
    ></owc-click-editable-input-autofill>
    <wa-button
      variant="brand"
      style="margin-top: 20px"
      size="s"
      @click=${() => {
        const buttonInputAutofill = document
          .querySelector('[demo-name=buttonInputAutofillField]')
          ?.shadowRoot?.querySelector('owc-click-editable-input-autofill');
        if (buttonInputAutofill) {
          buttonInputAutofill.editable = true;
          buttonInputAutofill.focus();
        }
      }}
      >Edit</wa-button
    >
  `;
};

API#

Shares the full Click Editable Input API (formatter, validator, read-only, show-copy-button, form-align, slots, change/submit events). Additional attributes & properties:

Property	Type	Default	Description
`data`	`Array<{ label, value }>`	`[]`	The autofill options (property only). Reactive - may be loaded async.
`value`	`string`	`''`	Free text, or an option's `value` after picking from the dropdown.
`open`	`boolean` (property)	`false`	Opens/closes the suggestion dropdown, e.g. together with `editable`.

Unlike the autocomplete variant, the display shows the raw value - free text stays free text and never falls back because it matches no option.