fix(material): add support for non-selectable input types

Closes #164
swordev · Dec 24, 2022 · e9827ed · e9827ed
1 parent 9d5860d
commit e9827ed
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/silly-experts-joke.md b/.changeset/silly-experts-joke.md
@@ -0,0 +1,5 @@
+---
+"@suid/material": patch
+---
+
+Fix the `TextField` component with `number` type
diff --git a/packages/material/src/InputBase/InputBase.tsx b/packages/material/src/InputBase/InputBase.tsx
@@ -282,6 +282,8 @@ const inputGlobalStyles = () => (
   </>
 );
 
+const selectionTypes = new Set(["text", "search", "password", "tel", "url"]);
+
 /**
  * `InputBase` contains as few styles as possible.
  * It aims to be a simple building block for creating an input.
@@ -362,13 +364,18 @@ const InputBase = $.component(function InputBase({
       const v = value();
 
       if (typeof v === "string") {
+        const inputElement = inputRef.ref as HTMLInputElement;
+        const type = inputElement.type ?? "text";
+        const isSelectionType = selectionTypes.has(type);
         const selectionStart = lastSelectionStart ?? v.length;
         if (v !== inputRef.ref.value) {
           inputRef.ref.value = v;
         }
+        if (!isSelectionType) inputElement.type = "text";
         if (inputRef.ref.selectionStart !== selectionStart) {
           inputRef.ref.setSelectionRange(selectionStart, selectionStart);
         }
+        if (!isSelectionType) inputElement.type = type;
       }
     }
     return false;