feat: Add autocorrect and spellcheck props to TextField

Author: techniq

.changeset/ui-textfield-autocorrect-spellcheck.md

@@ -0,0 +1,5 @@
+---
+'@layerstack/ui': minor
+---
+
+feat(TextField): Add `autocorrect` and `spellcheck` props (along existing `autocapitalize`)

packages/ui/src/lib/components/TextField.ssr.test.ts

@@ -22,6 +22,26 @@ describe('TextField (SSR)', () => {
     expect(body).not.toContain('<input');
   });
 
+  it('passes the keyboard attributes to the input', () => {
+    const { body } = render(TextField, {
+      props: { autocapitalize: 'off', autocorrect: 'off', spellcheck: false },
+    });
+
+    expect(body).toMatch(/<input[^>]*autocapitalize="off"/);
+    expect(body).toMatch(/<input[^>]*autocorrect="off"/);
+    expect(body).toMatch(/<input[^>]*spellcheck="false"/);
+  });
+
+  it('passes the keyboard attributes to the textarea', () => {
+    const { body } = render(TextField, {
+      props: { multiline: true, autocapitalize: 'off', autocorrect: 'off', spellcheck: false },
+    });
+
+    expect(body).toMatch(/<textarea[^>]*autocapitalize="off"/);
+    expect(body).toMatch(/<textarea[^>]*autocorrect="off"/);
+    expect(body).toMatch(/<textarea[^>]*spellcheck="false"/);
+  });
+
   it('renders the initial value', () => {
     const { body } = render(TextField, { props: { value: 'hello' } });
 

packages/ui/src/lib/components/TextField.svelte

@@ -85,6 +85,10 @@
     accept?: string | RegExp;
     /** https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize */
     autocapitalize?: InputProps['autocapitalize'];
+    /** Safari only.  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect */
+    autocorrect?: InputProps['autocorrect'];
+    /** https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck */
+    spellcheck?: InputProps['spellcheck'];
     role?: AriaRole;
 
     /** see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min */
@@ -167,6 +171,8 @@
     replace,
     accept,
     autocapitalize,
+    autocorrect,
+    spellcheck,
     role,
     min,
     max,
@@ -442,6 +448,8 @@
             {/if}
 
             {#if multiline}
+              <!-- `autocorrect` is spread because `svelte/elements` types it for `<input>` alone,
+                   while Safari honours it on a `<textarea>` as well -->
               <textarea
                 {id}
                 {name}
@@ -451,6 +459,8 @@
                 {disabled}
                 value={inputValue}
                 {autocapitalize}
+                {spellcheck}
+                {...{ autocorrect }}
                 bind:this={inputEl}
                 oninput={handleInput}
                 {onfocus}
@@ -475,6 +485,8 @@
                 {replace}
                 {accept}
                 {autocapitalize}
+                {autocorrect}
+                {spellcheck}
                 {min}
                 {max}
                 step={resolvedStep}