fix(OUT-3450): auto-focus assignee search + fix placeholder size

[aschwartz91]

Summary

Targeting two issues in the Assignee/Creator/Association filter selector:

1. Having to click twice when searching for an assignee — when the user clicks Filters → Assignee (or Creator/Association), the search input now auto-focuses so they can start typing immediately. Uses a ref + input.focus({ preventScroll: true }) instead of react-select's autoFocus prop, because the latter scrolls the popover into view on mount.
2. Placeholder text size — the search placeholder and input were rendering at 14px. Per the Figma design-system spec they should be 13px / line-height 20px. Both are updated.

Also tidied up a couple of related visual details while the area was open:

• Lightened the placeholder color to #9B9FA3 so it matches the lighter gray used by the top-bar search placeholder.
• Removed the blue focus-within / hover border on the control; the border stays #EFF1F4 regardless of state.

The remaining design-system work (unifying the search box + options into a single seamless container, and making 13px the default in the DS) is tracked separately in POR-19462.

Test plan

• Open Filters → Assignee: search input is focused immediately (can type without clicking), and the page does not scroll
• Same for Filters → Creator and Filters → Association
• Placeholder renders at 13px and uses the lighter gray color
• Selecting an assignee/creator/association still works as before and applies the filter

Before

After

🤖 Generated with Claude Code

[linear-code]

OUT-3450 Fix assignee selector

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tasks-app	Error		Apr 24, 2026 2:14pm

[greptile-apps]

Greptile Summary

This PR fixes two UX issues in the Assignee/Creator/Association filter selector: auto-focusing the search input on open (via useRef + focus({ preventScroll: true }) to avoid the scroll side-effect of react-select's autoFocus prop), and correcting the placeholder/input font size to 13px/20px per the design spec. Style overrides are consolidated into a new userCompanySelectorStyles object and applied to both FilterAssigneeSection and CopilotSelector, replacing the removed cop-border-primary CSS class selector on StyledUserCompanySelector.

Confidence Score: 5/5

Safe to merge — all changes are self-contained UI fixes with no data-layer impact.

The auto-focus approach is correct and avoids the react-select scroll bug. Style consolidation is clean — both consumers of StyledUserCompanySelector now pass styles explicitly so removing the cop-border-primary CSS class override doesn't leave any component unstyled. The previous P1 hover-border concern is resolved in this commit. No P0/P1 findings remain.

No files require special attention.

Important Files Changed

Filename	Overview
src/components/inputs/UserCompanySelectorStyles.ts	New file centralizing react-select style overrides (border, placeholder, input size, colors). Correctly overrides hover/focus-within border and hardcodes border color to prevent react-select's focus-state blue ring.
src/components/inputs/FilterSelector/FilterAssigneeSection.tsx	Adds auto-focus via useRef + useEffect querying the inner input and calling focus({ preventScroll: true }); applies shared userCompanySelectorStyles.
src/components/inputs/FilterSelector/index.tsx	Passes autoFocus prop to FilterAssigneeSection; no other logic changes.
src/components/inputs/CopilotSelector.tsx	Now applies shared userCompanySelectorStyles for visual consistency with the filter selector.
src/app/detail/ui/styledComponent.tsx	Removes the cop-border-primary CSS class override from StyledUserCompanySelector (border/bg now handled via styles prop in both consumers).

Sequence Diagram

sequenceDiagram
    participant User
    participant FilterSelector
    participant FilterAssigneeSection
    participant DOM

    User->>FilterSelector: clicks "Filters → Assignee"
    FilterSelector->>FilterSelector: setFilterMode(Assignee)
    FilterSelector->>FilterAssigneeSection: render(autoFocus=true)
    FilterAssigneeSection->>DOM: mount Box + StyledUserCompanySelector
    FilterAssigneeSection->>DOM: useEffect → querySelector('input')
    DOM-->>FilterAssigneeSection: input element
    FilterAssigneeSection->>DOM: input.focus({ preventScroll: true })
    User->>FilterAssigneeSection: types search query immediately

Loading

_{Reviews (3): Last reviewed commit: "fix(OUT-3450): address PR review feedbac..." | Re-trigger Greptile}

[greptile-apps]

Missing '&:hover' override may leave a residual border change

React-select v5's default control base styles include a '&:hover': { borderColor: ... } pseudo-selector rule. Spreading ...base brings that hover rule into the returned object, and CSS pseudo-class rules (:hover) have higher specificity than the plain borderColor: '#EFF1F4' set at the top level — so on mouse-over the border may still shift to react-select's default hover color (~#CCCCCC), contrary to the stated goal of keeping the border #EFF1F4 at all times.

Adding an explicit '&:hover' override would prevent that:

Suggested change

	control: (base) => ({
	...base,
	borderColor: '#EFF1F4',
	backgroundColor: '#FFFFFF',
	boxShadow: 'none',
	'&:focus-within': {
	borderColor: '#EFF1F4',
	},
	}),
	control: (base) => ({
	...base,
	borderColor: '#EFF1F4',
	backgroundColor: '#FFFFFF',
	boxShadow: 'none',
	'&:hover': {
	borderColor: '#EFF1F4',
	},
	'&:focus-within': {
	borderColor: '#EFF1F4',
	},
	}),

[aschwartz91]

Good catch — added an explicit '&:hover' override in d4d2f0c so the border stays #EFF1F4 regardless of hover state.

[priosshrsth]

Minor nitpick and awaiting Arpan's feedback on one possible regression?

[vercel]

Deployment failed with the following error:

Deploying Serverless Functions to multiple regions is restricted to the Pro and Enterprise plans.

Learn More: https://vercel.link/multiple-function-regions

[aschwartz91]

@greptileai PTAL