Skip to content

#4302 dropdown autofill autocomplete #4383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
staysgt wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

#4302 dropdown autofill autocomplete #4383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/frontend/src/components/NERAutocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
noOptionsText={noOptionsText}
options={options}
sx={autocompleteStyle}
autoHighlight
disabled={disabled}
size={size}
renderInput={autocompleteRenderInput}
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/components/dropdowns/DropdownSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const DropdownSelect: React.FC<DropdownSelectProps> = ({
if (multiple) {
return (
<Autocomplete
autoHighlight

@wavehassman wavehassman Aug 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

autoHighlight was added to the multiple-branch only

the single-select branch (used by ProjectDropdown in TaskFormModal.tsx) is missing it

multiple
size={size}
loading={loading}
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/components/dropdowns/LabelDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const LabelDropdown: React.FC<LabelDropdownProps> = ({ value, onChange, sx }) =>

return (
<Autocomplete
autoHighlight
multiple
size="small"
loading={isLoading}
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/pages/AdminToolsPage/EditGuestView/EditFeaturedProjectsDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const EditFeaturedProjectsDropdown: React.FC<EditFeatureProjectsDropdownProps> =

return (
<Autocomplete
autoHighlight
multiple
options={allProjects}
getOptionLabel={(option) => `${projectWbsNamePipe(option)}`}
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/pages/CalendarPage/Components/CalendarCreateTaskModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,7 @@ const CalendarCreateTaskModal: React.FC<CalendarCreateTaskModalProps> = ({ open,
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, val) => option.id === val.id}
filterSelectedOptions
multiple
Expand All @@ -255,6 +256,7 @@ const CalendarCreateTaskModal: React.FC<CalendarCreateTaskModalProps> = ({ open,
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
multiple
filterSelectedOptions
options={taskLabels ?? []}
Expand Down
4 changes: 4 additions & 0 deletions src/frontend/src/pages/CalendarPage/Components/EventModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1337,6 +1337,7 @@ const EventModal: React.FC<BaseEventModalProps> = ({
/>
))}
<Autocomplete
autoHighlight
options={memberOptions.filter((m) => !requiredMembers.find((rm) => rm.id === m.id))}
value={null}
inputValue={requiredMemberInput}
Expand Down Expand Up @@ -1376,6 +1377,7 @@ const EventModal: React.FC<BaseEventModalProps> = ({
/>
))}
<Autocomplete
autoHighlight
options={memberOptions.filter((m) => !optionalMembers.find((om) => om.id === m.id))}
value={null}
inputValue={optionalMemberInput}
Expand Down Expand Up @@ -1415,6 +1417,7 @@ const EventModal: React.FC<BaseEventModalProps> = ({
/>
))}
<Autocomplete
autoHighlight
options={teamOptions.filter((t) => !selectedTeams.find((st) => st.id === t.id))}
value={null}
inputValue={teamInput}
Expand Down Expand Up @@ -1462,6 +1465,7 @@ const EventModal: React.FC<BaseEventModalProps> = ({
</Tooltip>
))}
<Autocomplete
autoHighlight
options={notificationChannelOptions.filter(
(c) => !selectedNotificationChannels.find((sc) => sc.id === c.id)
)}
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/pages/CalendarPage/FilterModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ const FilterModal: React.FC<BaseFilterModalProps> = ({

{dropDownMembersOpen && (
<Autocomplete
autoHighlight
multiple
open={dropDownMembersOpen}
disableCloseOnSelect
Expand Down Expand Up @@ -216,6 +217,7 @@ const FilterModal: React.FC<BaseFilterModalProps> = ({

{dropDownTeamOpen && (
<Autocomplete
autoHighlight
multiple
open={dropDownTeamOpen}
disableCloseOnSelect
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/pages/ChangeRequestDetailPage/ChangeRequestActionMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ const ChangeRequestActionMenu: React.FC<ChangeRequestActionMenuProps> = ({
const requestReviewerDropdown = () => (
<>
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option.id === value.id}
limitTags={1}
disableCloseOnSelect
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/pages/FinancePage/FinanceComponents/AcceptProspectiveSponsorModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ const AcceptProspectiveSponsorModal = ({
name="valueTypes"
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
multiple
size="small"
options={VALUE_TYPE_OPTIONS}
Expand Down Expand Up @@ -319,6 +320,7 @@ const AcceptProspectiveSponsorModal = ({
control={control}
render={({ field }) => (
<Autocomplete
autoHighlight
{...field}
multiple
options={yearsOptions}
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/pages/FinancePage/FinanceComponents/SponsorForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,7 @@ export const SponsorForm: React.FC<SponsorFormProps> = ({
name="valueTypes"
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
multiple
options={VALUE_TYPE_OPTIONS}
getOptionLabel={(option) => option.label}
Expand Down Expand Up @@ -325,6 +326,7 @@ export const SponsorForm: React.FC<SponsorFormProps> = ({
defaultValue={[]}
render={({ field }) => (
<Autocomplete
autoHighlight
{...field}
multiple
options={yearsOptions}
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/pages/FinancePage/FinanceComponents/VendorFormModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ const VendorFormModal = ({ showModal, handleClose, defaultValues, onSubmit }: Ve
name="twoFactorContacts"
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
multiple
options={users}
disableCloseOnSelect
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/pages/GanttPage/ProjectGanttChart/AddGanttTaskModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@ const AddGanttTaskModal: React.FC<AddGanttTaskModalProps> = ({ showModal, handle
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
Expand All @@ -203,6 +204,7 @@ const AddGanttTaskModal: React.FC<AddGanttTaskModalProps> = ({ showModal, handle
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
multiple
filterSelectedOptions
options={taskLabels ?? []}
Expand Down
3 changes: 3 additions & 0 deletions ...age/ProjectViewContainer/PartReview/PartReviewComponents/PartFormModels/PartFormModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ const PartFormModal = ({ open, handleClose, defaultValues, onSubmit, partsInProj
<FormControl fullWidth>
<FormLabel>Tags (Optional)</FormLabel>
<Autocomplete
autoHighlight

@wavehassman wavehassman Aug 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

autoHighlight auto-selects the prepended "Add New" sentinel option on empty input
Enter now opens the create-tag modal instead of picking a tag
Needs autoHighlight={false} so "Add New" isn't index 0

multiple
options={[{ partTagId: 'add-new', name: 'Add New' }, ...tags]}
getOptionLabel={(option) => option.name}
Expand Down Expand Up @@ -192,6 +193,7 @@ const PartFormModal = ({ open, handleClose, defaultValues, onSubmit, partsInProj
<FormControl fullWidth>
<FormLabel>Assignees</FormLabel>
<Autocomplete
autoHighlight
multiple
options={users.filter((user) => !reviewerIds.some((reviewerId) => reviewerId === user.userId))}
getOptionLabel={(option) => `${option.firstName} ${option.lastName}`}
Expand All @@ -210,6 +212,7 @@ const PartFormModal = ({ open, handleClose, defaultValues, onSubmit, partsInProj
<FormControl fullWidth>
<FormLabel>Reviewers</FormLabel>
<Autocomplete
autoHighlight
multiple
options={users.filter((user) => !assigneeIds.some((assigneeId) => assigneeId === user.userId))}
getOptionLabel={(option) => `${option.firstName} ${option.lastName}`}
Expand Down
4 changes: 4 additions & 0 deletions src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/PartReview/PartsReviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ const PartsReviewPage = ({ project }: { project: Project }) => {
{showFilters && (
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
<Autocomplete
autoHighlight
multiple
size="small"
options={Object.values(Review_Status)}
Expand Down Expand Up @@ -184,6 +185,7 @@ const PartsReviewPage = ({ project }: { project: Project }) => {
sx={{ width: '20%' }}
/>
<Autocomplete
autoHighlight
multiple
size="small"
options={users}
Expand Down Expand Up @@ -223,6 +225,7 @@ const PartsReviewPage = ({ project }: { project: Project }) => {
sx={{ width: '20%' }}
/>
<Autocomplete
autoHighlight
multiple
size="small"
options={users}
Expand Down Expand Up @@ -262,6 +265,7 @@ const PartsReviewPage = ({ project }: { project: Project }) => {
sx={{ width: '20%' }}
/>
<Autocomplete
autoHighlight
multiple
size="small"
options={tags}
Expand Down
3 changes: 3 additions & 0 deletions src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/TaskFormModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@ const TaskFormModal: React.FC<TaskFormModalProps> = ({
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
Expand All @@ -346,6 +347,7 @@ const TaskFormModal: React.FC<TaskFormModalProps> = ({
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
multiple
filterSelectedOptions
options={taskLabels ?? []}
Expand Down Expand Up @@ -400,6 +402,7 @@ const TaskFormModal: React.FC<TaskFormModalProps> = ({
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
autoHighlight
multiple
filterSelectedOptions
options={blockedByOptions}
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/pages/StatisticsPage/GraphCollectionForm/GraphCollectionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ const GraphCollectionForm = ({ open, onHide, defaultValues, onSubmit, successTex
render={({ field: { onChange, value } }) => {
return (
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/pages/StatisticsPage/GraphForm/GraphFormView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ export const GraphFormView: React.FC<GraphFormViewProps> = ({ control, errors, c
render={({ field: { onChange, value } }) => {
return (
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option?.id === value?.id}
filterSelectedOptions
multiple
Expand Down Expand Up @@ -228,6 +229,7 @@ export const GraphFormView: React.FC<GraphFormViewProps> = ({ control, errors, c
render={({ field: { onChange, value } }) => {
return (
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/pages/TeamsPage/TeamMembersPageBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ const TeamMembersPageBlock: React.FC<TeamMembersPageBlockProps> = ({ team }) =>
<Grid container direction={'row'}>
<Grid item xs={9} md={10} lg={11}>
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
Expand Down Expand Up @@ -161,6 +162,7 @@ const TeamMembersPageBlock: React.FC<TeamMembersPageBlockProps> = ({ team }) =>
<Grid container direction={'row'}>
<Grid item xs={9} md={10} lg={11}>
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/pages/WorkPackageForm/WorkPackageFormView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,7 @@ const WorkPackageFormView: React.FC<WorkPackageFormViewProps> = ({
control={control}
render={({ field: { onChange, value: formValue } }) => (
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/pages/WorkPackageTemplateForm/WorkPackageTemplateFormView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ const WorkPackageTemplateFormView: React.FC<WorkPackageTemplateFormViewProps> =
control={control}
render={({ field: { onChange, value: formValue } }) => (
<Autocomplete
autoHighlight
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
Expand Down
Loading