From 480f932d69710da28d6a807caa64083a6cc1ef05 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 25 Feb 2023 12:22:17 -0800
Subject: [PATCH] fix: readonly inputs cannot be invalid

Addresses https://github.com/carbon-design-system/carbon-components-svelte/pull/1666#pullrequestreview-1314558645
---
 src/NumberInput/NumberInput.svelte |  6 +++---
 src/TextInput/TextInput.svelte     | 11 ++++++-----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index bb4f1c90..e917c303 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -128,7 +128,7 @@
   $: incrementLabel = translateWithId("increment");
   $: decrementLabel = translateWithId("decrement");
   $: error =
-    invalid ||
+    (invalid && !readonly) ||
     (!allowEmpty && value == null) ||
     value > max ||
     (typeof value === "number" && value < min);
@@ -191,8 +191,8 @@
         type="number"
         pattern="[0-9]*"
         aria-describedby="{errorId}"
-        data-invalid="{invalid || undefined}"
-        aria-invalid="{invalid || undefined}"
+        data-invalid="{(error) || undefined}"
+        aria-invalid="{(error) || undefined}"
         aria-label="{label ? undefined : ariaLabel}"
         disabled="{disabled}"
         id="{id}"
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index e2eb5d19..5b8b184a 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -95,6 +95,7 @@
   };
 
   $: isFluid = !!ctx && ctx.isFluid;
+  $: error = invalid && !readonly;
   $: helperId = `helper-${id}`;
   $: errorId = `error-${id}`;
   $: warnId = `warn-${id}`;
@@ -161,7 +162,7 @@
     class:bx--text-input__field-outer-wrapper--inline="{inline}"
   >
     <div
-      data-invalid="{invalid || undefined}"
+      data-invalid="{error || undefined}"
       data-warn="{warn || undefined}"
       class:bx--text-input__field-wrapper="{true}"
       class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
@@ -181,10 +182,10 @@
       {/if}
       <input
         bind:this="{ref}"
-        data-invalid="{invalid || undefined}"
-        aria-invalid="{invalid || undefined}"
+        data-invalid="{error || undefined}"
+        aria-invalid="{error || undefined}"
         data-warn="{warn || undefined}"
-        aria-describedby="{invalid
+        aria-describedby="{error
           ? errorId
           : warn
           ? warnId
@@ -200,7 +201,7 @@
         readonly="{readonly}"
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
-        class:bx--text-input--invalid="{invalid}"
+        class:bx--text-input--invalid="{error}"
         class:bx--text-input--warn="{warn}"
         class:bx--text-input--sm="{size === 'sm'}"
         class:bx--text-input--xl="{size === 'xl'}"