fix(MoneyInput): fix label color for required

silinternational · Dec 21, 2021 · dc9c3ba · dc9c3ba
1 parent b9d924a
commit dc9c3ba
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/components/mdc/TextInput/MoneyInput.svelte b/components/mdc/TextInput/MoneyInput.svelte
@@ -21,13 +21,15 @@ let element = {}
 let mdcTextField = {}
 let width = ''
 let hasFocused = false
+let hasBlurred = false
 
 $: mdcTextField.value = value
 $: valueLength = value?.toString()?.length
 $: hasExceededMaxLength = maxlength && valueLength > maxlength
 $: hasExceededMaxValue = maxValue && internalValue > maxValue
 $: isLowerThanMinValue = minValue && internalValue < minValue
-$: error = hasExceededMaxValue || isLowerThanMinValue || hasExceededMaxLength || valueNotDivisibleByStep
+$: showErrorIcon = hasExceededMaxValue || isLowerThanMinValue || hasExceededMaxLength || valueNotDivisibleByStep
+$: error = showErrorIcon || (hasFocused && hasBlurred && required && !value)
 $: showCounter = maxlength && valueLength / maxlength > 0.85
 $: valueNotDivisibleByStep = internalValue && (internalValue / Number(step)) % 1 !== 0
 $: internalValue = Number(value) || ''
@@ -78,6 +80,7 @@ const focus = (node) => autofocus && node.focus()
     use:focus
     on:focus={() => (hasFocused = true)}
     on:blur
+    on:blur={() => (hasBlurred = true)}
     on:keydown
     on:keypress
     on:keyup
@@ -86,10 +89,10 @@ const focus = (node) => autofocus && node.focus()
     {disabled}
     {placeholder}
   />
-  {#if error}
-    <span class="mdc-text-field__affix mdc-text-field__affix--suffix"
-      ><i class="material-icons error" aria-hidden="true">error</i></span
-    >
+  {#if showErrorIcon}
+    <span class="mdc-text-field__affix mdc-text-field__affix--suffix">
+      <i class="material-icons error" aria-hidden="true"> error</i>
+    </span>
   {/if}
   <span class="mdc-notched-outline">
     <span class="mdc-notched-outline__leading" />