Pin Input Number only

[GimpMaster]

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

Is it possible to make the pin input accept only a number. If we did this then when viewing it on a phone with the keyboard we would get the number pad only. Right now its a pain since each time you type a character, you have to select Number mode, press one number, then keyboard jumps back to qwerty keyboard

What type of pull request would this be?

None

Provide relevant links or additional information.

No response

[NDOY3M4N]

I think this issue should be fixed in Melt UI. Actually someone already created an issue there and they gave him a temporary workaround. Here's the simplified version for Bits UI components.

<script lang="ts">
    import { PinInput } from "bits-ui";

    let value: string[] | undefined = [];

    let pinInputType: "text" | "password" | "number" = "number";
</script>

<!-- NOTE: this will throw a ts error on the type props, but it's just a workaround -->
<PinInput.Root bind:value type={pinInputType} placeholder="0">
  ...
</PinInput.Root>

[GimpMaster]

Thank you. It seems like it works. I had to trick it into letting the typescript error get around.

One thing I noticed is that melt-ui uses the setSelectionRange which doesn't work with number inputs. Maybe that is why they never implemented numbers? Here is the error I get. It still works however.

Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.

You are right this is probably more of a melt-ui feature that needs to get thought out.