fix: company-input-v2 — explicit selection only, no clear icon, "Use "<typed>"" row

[JpMaxMan]

The bug

CompanyInputV2 used MUI's autoSelect, which commits the currently highlighted option on blur. Users would mouse over a suggestion, then tab away intending to keep their typed text — and the moused-over company got saved instead (wrong company populated).

Changes (src/components/inputs/company-input-v2.js)

• Remove autoSelect — selection is now explicit (click / Enter) only. This is the root-cause fix.
• New onBlur — tab/click-away commits exactly what was typed: resolved to an existing company only on an exact (case-insensitive) name match, otherwise a free-text { id: 0, name }. Never commits a merely-highlighted option.
• disableClearable — removes the MUI clear (x) icon (the field commits free text, so an explicit clear affordance isn't wanted; delete the text to empty).
• Use "<typed>" row — filterOptions appends a synthetic option so users can explicitly commit their typed text; skipped when it already matches a listed company. Commits a clean { id: 0, name } (display-only marker stripped). renderOption shows the Use "…" label; getOptionLabel still returns the plain name.
• Predictive typeahead unchanged (freeSolo + server-side queryRegistrationCompanies).

⚠️ Shared-component behavior change

This affects all CompanyInputV2 consumers, not just the requesting screen: no more clear (x) icon, and blur no longer auto-selects a highlighted option (it keeps the typed text). Both are intentional — flagging for reviewers.

Note: the Formik variant CompanyInputMUI (mui/formik-inputs/company-input-mui.js) is a separate implementation and is not touched here; if a Formik form needs the same behavior we'll do it in a follow-up.

Tests

+5 tests; the file's suite is 25/25 green:

• blur keeps the typed text and never commits a highlighted option (pins the bug);
• blur resolves an exact case-insensitive match to the canonical company;
• clear icon never renders, even with a real selected value;
• Use "…" row commits clean free text; no redundant Use row on an exact match.

Verified by running jest directly (node_modules/.bin/jest) — CI's Node 18 avoids a local node-sass/Node-25 build issue unrelated to this change. package.json version intentionally not bumped (done separately at release).

Summary by CodeRabbit

• New Features
  • Added a synthetic “Use ‘…’” option to commit a company name that isn’t in the suggestions.
  • “Use ‘…’” is shown only when it doesn’t already match an available option (trimmed, case-insensitive).
• Bug Fixes
  • Leaving the field (including browser autofill) now correctly commits typed/free-text values when there’s no exact match; exact-name matches commit the existing option instead.
  • Removed the clear (x) icon to keep the selection behavior consistent and prevent redundant updates.
• Tests
  • Expanded blur/autofill/clear test coverage and updated assertions for the “Use ‘…’” row behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ac6c7aea-13dd-4afa-b510-2dd95550d5b9

📥 Commits

Reviewing files that changed from the base of the PR and between 0f79e52 and c279cc7.

📒 Files selected for processing (1)

• src/components/inputs/company-input-v2.js

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/inputs/company-input-v2.js

---

📝 Walkthrough

Walkthrough

CompanyInputV2 commits typed text on blur, resolves case-insensitive company matches, supports explicit Use "<typed>" free-text options, disables the clear icon, and adds integration coverage for these behaviors.

Changes

CompanyInputV2 selection behavior

Layer / File(s)	Summary
Selection and blur normalization src/components/inputs/company-input-v2.js, src/components/inputs/__tests__/company-input-v2.test.js	Blur commits matching companies or { id: 0, name } free-text entries, handles browser autofill and clearing, while onChange normalizes string and synthetic free-text selections.
Synthetic free-text option UI src/components/inputs/company-input-v2.js, src/components/inputs/__tests__/company-input-v2.test.js	Autocomplete preserves options, adds and labels Use "<typed>" rows, disables the clear icon, and tests matching-option suppression and free-text selection.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Autocomplete
  participant CompanyInputV2
  participant Parent
  User->>Autocomplete: type or autofill company text
  Autocomplete->>CompanyInputV2: blur with DOM input value
  CompanyInputV2->>Parent: commit company, free-text entry, or null

Loading

Possibly related PRs

• OpenStackweb/openstack-uicore-foundation#241: Updates the same component’s normalization and blur behavior for typed values.
• OpenStackweb/openstack-uicore-foundation#250: Overlaps with the component’s free-text, canonical matching, and clear-icon behavior.

Suggested reviewers: smarcet

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately highlights the main behavior changes: explicit selection, disabled clear icon, and the free-text row.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/company-input-v2-freetext-use-option

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@src/components/inputs/company-input-v2.js`:
- Around line 113-139: Update the onBlur handler to clear the committed company
when the trimmed inputValue is empty, by calling fireChange with null or the
component’s established clear value. Preserve the existing exact-match and
free-text behavior for non-empty input, avoid duplicate changes when already
cleared, and add a regression test covering delete-all-text followed by blur.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ecfeb9fa-e11a-4a27-bcea-861a0f48f74e

📥 Commits

Reviewing files that changed from the base of the PR and between 5688cf7 and 294bc61.

📒 Files selected for processing (2)

• src/components/inputs/__tests__/company-input-v2.test.js
• src/components/inputs/company-input-v2.js

[JpMaxMan]

Re: autoSelect and the #241 autofill fix — addressed in 1bc112a

@gcutrini flagged (via Slack) that autoSelect was added in #241 to fix a real bug: in freeSolo mode MUI only propagates a value on explicit selection, so typing-and-tabbing and browser autofill (iOS Chrome) never reached the parent and required-field validation failed. Correct — and simply removing autoSelect would regress that.

Reconciliation (latest commit): autoSelect stays removed — it's what committed the currently highlighted option on blur, so mousing over a suggestion and tabbing away saved the wrong company. In its place, onBlur now reads the input's DOM value (event.target.value) — the same source autoSelect read internally — and commits it as the field value. So:

• ✅ typed-and-tabbed values still propagate on blur (fix(company-input-v2): commit typed/autofilled value on blur #241)
• ✅ autofilled values still propagate on blur, even when they never fire onInputChange (fix(company-input-v2): commit typed/autofilled value on blur #241 — new test: "commits a browser-autofilled value on blur even when it never fired onInputChange")
• ✅ a merely highlighted/hovered option is never committed (the bug this PR set out to fix)

Suite: 26/26 (jest run directly; CI Node 18 avoids a local node-sass/Node-25 issue).

⚠️ Merge gate: the autofill test passes in jsdom, but jsdom ≠ iOS Chrome. Reading event.target.value is strictly the more-robust source (it's what autoSelect used), but the real iOS-Chrome autofill path needs a device re-test. @gcutrini — could you verify that path on this branch, since you have the #241 repro? Happy to pair if the behavior differs.

[JpMaxMan]

CodeRabbit finding (clear-on-empty in onBlur) — addressed in 0f79e52

Verified against the current code: valid, and worth fixing precisely because this PR removes the clear (x) icon (disableClearable), making delete-all-text + blur the only way to clear the field. Previously onBlur fired nothing for empty input, so the prior company stayed committed (a required field would still read as filled).

Fix (minimal):

• onBlur now propagates null when the field is emptied, guarded by if (normalizedValue) so an already-cleared field doesn't emit a redundant change.
• Non-empty exact-match / free-text behavior unchanged.
• Regression tests added: "clears the committed company when the field is emptied (delete-all-text) and blurred" and "does not fire a redundant change when an already-empty field is blurred". Suite 28/28.

[gcutrini]

Small UX nit: the Use "<typed>" row lands at the bottom. Feels better at the top. Typed text is the user's primary intent, and arrow-down-then-Enter would commit it without scrolling past matches. One-line change in filterOptions:

return trimmed && !alreadyListed
  ? [{ id: 0, name: trimmed, isFreeTextOption: true }, ...opts]
  : opts;

[smarcet]

LGTM