From d4d639a5cdb03400ef960f48d092192c4f57c0e7 Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Fri, 20 Sep 2024 14:44:18 -0400
Subject: [PATCH] APP-6309: restrict text in Firefox in `<RestrictedText>`
 input (#581)

---
 packages/core/package.json                          |  2 +-
 packages/core/src/lib/input/input.svelte            |  4 ++--
 .../core/src/lib/input/restricted-text-input.svelte | 13 ++++++++-----
 packages/core/src/lib/input/text-input.svelte       |  4 ++--
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 53e8d5417..a9aa2f711 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.153",
+  "version": "0.0.154",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",
diff --git a/packages/core/src/lib/input/input.svelte b/packages/core/src/lib/input/input.svelte
index a5c1ec161..2105e60e6 100644
--- a/packages/core/src/lib/input/input.svelte
+++ b/packages/core/src/lib/input/input.svelte
@@ -86,8 +86,6 @@ $: errorClasses =
       errorClasses,
       extraClasses
     )}
-    bind:value
-    bind:this={input}
     on:input
     on:input|capture={handleDisabled}
     on:change
@@ -96,6 +94,8 @@ $: errorClasses =
     on:keydown|capture={handleDisabledKeydown}
     on:focus
     on:blur
+    bind:value
+    bind:this={input}
   />
 
   {#if icon}
diff --git a/packages/core/src/lib/input/restricted-text-input.svelte b/packages/core/src/lib/input/restricted-text-input.svelte
index 514b6a7b3..05b0b2fe4 100644
--- a/packages/core/src/lib/input/restricted-text-input.svelte
+++ b/packages/core/src/lib/input/restricted-text-input.svelte
@@ -1,4 +1,4 @@
-<!-- 
+<!--
 @component
 
 For text-based user inputs that only allow certain characters. Shows the user a tooltip when they attempt to use disallowed characters.
@@ -15,11 +15,13 @@ For text-based user inputs that only allow certain characters. Shows the user a
 ```
 -->
 <script lang="ts">
-import type cx from 'classnames';
-import { TextInput } from '$lib';
+import cx from 'classnames';
+
 import { Tooltip, type TooltipVisibility } from '$lib/tooltip';
 import { useTimeout } from '$lib/use-timeout';
 
+import Input from './input.svelte';
+
 /** The value of the input. */
 export let value: string;
 
@@ -85,11 +87,12 @@ $: tooltipVisibility = validationState === 'hide' ? 'invisible' : 'visible';
   let:tooltipID
 >
   <p slot="description">{tooltipDescription}</p>
-  <TextInput
+  <Input
+    type="text"
     cx={inputCX}
     aria-describedby={tooltipID}
-    {value}
     on:input={handleInput}
+    {value}
     {...$$restProps}
   />
 </Tooltip>
diff --git a/packages/core/src/lib/input/text-input.svelte b/packages/core/src/lib/input/text-input.svelte
index bf9936eac..fc6b29e7b 100644
--- a/packages/core/src/lib/input/text-input.svelte
+++ b/packages/core/src/lib/input/text-input.svelte
@@ -38,11 +38,11 @@ export { extraClasses as cx };
   cx={extraClasses}
   {type}
   {...$$restProps}
-  bind:value
-  bind:input
   on:input
   on:change
   on:keydown
   on:focus
   on:blur
+  bind:value
+  bind:input
 />