✨ Added support for email autocomplete when signing up / subscribing.

[chipironcin]

This change was suggested by an user in X. Improves user experience by autocompleting the last part of an email address (email provider) based on the characters being typed by the user.

Got some code for us? Awesome 🎊!

Please take a minute to explain the change you're making:

• Why are you making it?
• What does it do?
• Why is this something Ghost users or developers need?

Please check your PR against these items:

• I've read and followed the Contributor Guide
• I've explained my change
• I've written an automated test to prove my change works

We appreciate your contribution! 🙏

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 55695391-9766-4081-876e-b8564a79f981

📥 Commits

Reviewing files that changed from the base of the PR and between fa36053 and 0a20bc6.

📒 Files selected for processing (2)

• apps/portal/src/components/pages/signup-page.js
• apps/portal/test/unit/components/common/input-field.test.js

💤 Files with no reviewable changes (1)

• apps/portal/src/components/pages/signup-page.js

---

Walkthrough

This PR adds email domain autocomplete to the signup form. The InputField component now accepts a list prop and forwards it to the underlying input element. The FormInput wrapper passes field.list through to InputField. The SignupPage configures the email field to reference an email-domains datalist, implements an updateEmailAutocomplete function that populates matching email domains as the user types, and renders the datalist element. Test coverage includes updates to InputField tests and a new integration test verifying the datalist and autocomplete suggestions appear correctly.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main feature addition: email autocomplete support for signup/subscription flows, which aligns with all code changes.
Description check	✅ Passed	The description explains the feature (email provider autocomplete), the motivation (user suggestion), and confirms testing, all relevant to the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

apps/portal/src/components/pages/signup-page.js (1)

785-790: ⚡ Quick win

Remove the dead list prop from InputForm here.

InputForm doesn't read a top-level list prop; the working contract is already field.list via getInputFields(). Keeping both makes it look like InputForm supports two wiring paths when only one is real.

Suggested cleanup

                         <InputForm
                             fields={fields}
                             onChange={(e, field) => this.handleInputChange(e, field)}
                             onKeyDown={e => this.onKeyDown(e)}
-                            list="email-domains"
                         />

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/portal/src/components/pages/signup-page.js` around lines 785 - 790,
Remove the dead top-level list prop passed to InputForm here: InputForm
currently reads per-field lists via field.list (as produced by
getInputFields()), so drop the extraneous list="email-domains" from the
InputForm call to avoid implying a second wiring path; ensure only
fields={fields}, onChange and onKeyDown remain so InputForm continues to rely on
field.list populated by getInputFields().

apps/portal/test/unit/components/common/input-field.test.js (1)

10-10: ⚡ Quick win

Assert the new list contract directly in this unit test.

Right now this setup passes list: 'data-list', but nothing here fails if InputField stops applying it to the DOM. A direct attribute assertion keeps this test aligned with the API you just added.

Suggested assertion

     test('renders', () => {
         const {inputEl} = setup();
         expect(inputEl).toBeInTheDocument();
+        expect(inputEl).toHaveAttribute('list', 'data-list');
     });

Also applies to: 27-30

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/portal/test/unit/components/common/input-field.test.js` at line 10, The
test currently passes list: 'data-list' into the InputField props but never
asserts that the rendered input actually receives the list attribute; update the
unit test for InputField to directly query the rendered input element (the
element rendered by the InputField component) and assert that it has attribute
list="data-list" (and add the same assertion covering the other case around
lines 27-30) so the spec fails if the component stops applying the list prop to
the DOM.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/portal/src/components/pages/signup-page.js`:
- Around line 785-790: Remove the dead top-level list prop passed to InputForm
here: InputForm currently reads per-field lists via field.list (as produced by
getInputFields()), so drop the extraneous list="email-domains" from the
InputForm call to avoid implying a second wiring path; ensure only
fields={fields}, onChange and onKeyDown remain so InputForm continues to rely on
field.list populated by getInputFields().

In `@apps/portal/test/unit/components/common/input-field.test.js`:
- Line 10: The test currently passes list: 'data-list' into the InputField props
but never asserts that the rendered input actually receives the list attribute;
update the unit test for InputField to directly query the rendered input element
(the element rendered by the InputField component) and assert that it has
attribute list="data-list" (and add the same assertion covering the other case
around lines 27-30) so the spec fails if the component stops applying the list
prop to the DOM.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9b813fb9-e63f-4a67-b268-c1ff914b34c8

📥 Commits

Reviewing files that changed from the base of the PR and between ed5f11d and fa36053.

📒 Files selected for processing (5)

• apps/portal/src/components/common/input-field.js
• apps/portal/src/components/common/input-form.js
• apps/portal/src/components/pages/signup-page.js
• apps/portal/test/unit/components/common/input-field.test.js
• apps/portal/test/unit/components/pages/signup-page.test.js

[9larsons]

Hey @chipironcin, thanks for the suggestion. Most users have some form of autofill from their own credential managers these days, so this feels unnecessary for Ghost and may add frustration with more 'popup' sort of behavior.