feat: Support `input#list`

[oliveryasuna]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Add the list property to <ion-input>.

<ion-input list="my-list"/>
<!-- OR React -->
<IonInput list="my-list"/>
<!-- OR whatever syntax for other frameworks. -->

<datalist id="my-list">
  ...
</datalist>

Is there a reason it is not supported? Perhaps because it does not represent native text field behavior? Note: There is very little styling possible on <datalist>.

Describe the Use Case

To connect to a <datalist> in order to show suggestions.

Describe Preferred Solution

No response

Describe Alternatives

Here is my current workaround:

<IonItem className="ion-no-padding">
  {/*This is a hack to make sure the input below is styled.*/}
  <IonInput style={{display: 'none'}}/>
  {/*TODO: Platform-dependent class names.*/}
  <div className="sc-ion-input-ios-h sc-ion-input-ios-s ios input-label-placement-start in-item">
    <label htmlFor="code" className="input-wrapper sc-ion-input-ios">
      <div className="label-text-wrapper label-text-wrapper-hidden sc-ion-input-ios sc-ion-input-ios-s"></div>
      <div className="native-wrapper sc-ion-input-ios sc-ion-input-ios-s">
        <input
            name="code"
            type="text"
            autoCapitalize="none"
            autoComplete="off"
            autoCorrect="off"
            spellCheck="false"
            placeholder="or enter code"
            list="codes"
            className="native-input sc-ion-input-ios"/>
        <datalist id="codes">
          <option>aaa</option>
          <option>aab</option>
          <option>aac</option>
          <option>cca</option>
          <option>ccb</option>
          <option>ccc</option>
        </datalist>
      </div>
    </label>
  </div>
</IonItem>

Related Code

No response

Additional Information

No response

[jberglinds]

I'm looking for this too. In my React project, I've solved it like this for now:

<IonInput
  ref={async (node) => {
    const input = await node?.getInputElement();
    input?.setAttribute("list", "codes");
  }}
  label="Code"
  type="text"
/>
<datalist id={"codes"}>
  <option value={"aaa"} />
  <option value={"aab"} />
  <option value={"aac"} />
  ...
</datalist>

[oliveryasuna]

I'm looking for this too. In my React project, I've solved it like this for now:

<IonInput
  ref={async (node) => {
    const input = await node?.getInputElement();
    input?.setAttribute("list", "codes");
  }}
  label="Code"
  type="text"
/>
<datalist id={"codes"}>
  <option value={"aaa"} />
  <option value={"aab"} />
  <option value={"aac"} />
  ...
</datalist>

I feel silly for not thinking of this!

[oliveryasuna]

@jberglinds Actually, your solution seems to cause a bug. You have to click the input multiple times for it to show the datalist.