diff --git a/changes/9179-autofocus-forms b/changes/9179-autofocus-forms new file mode 100644 index 0000000000..170a72c5c7 --- /dev/null +++ b/changes/9179-autofocus-forms @@ -0,0 +1 @@ +- Autofocus first entry of all forms for better UX diff --git a/frontend/components/FleetAce/FleetAce.tsx b/frontend/components/FleetAce/FleetAce.tsx index c79ac3f979..d85e8d7b41 100644 --- a/frontend/components/FleetAce/FleetAce.tsx +++ b/frontend/components/FleetAce/FleetAce.tsx @@ -12,6 +12,7 @@ import "./mode"; import "./theme"; export interface IFleetAceProps { + focus?: boolean; error?: string | null; fontSize?: number; label?: string; @@ -33,6 +34,7 @@ export interface IFleetAceProps { const baseClass = "fleet-ace"; const FleetAce = ({ + focus, error, fontSize = 14, label, @@ -131,6 +133,7 @@ const FleetAce = ({ width="100%" wrapEnabled={wrapEnabled} style={style} + focus={focus} commands={[ { name: "commandName", diff --git a/frontend/components/forms/fields/Dropdown/Dropdown.jsx b/frontend/components/forms/fields/Dropdown/Dropdown.jsx index b554496724..b96572a1ff 100644 --- a/frontend/components/forms/fields/Dropdown/Dropdown.jsx +++ b/frontend/components/forms/fields/Dropdown/Dropdown.jsx @@ -33,6 +33,7 @@ class Dropdown extends Component { wrapperClassName: PropTypes.string, parseTarget: PropTypes.bool, tooltip: PropTypes.string, + autoFocus: PropTypes.bool, }; static defaultProps = { @@ -47,6 +48,7 @@ class Dropdown extends Component { placeholder: "Select one...", // if value undefined parseTarget: false, tooltip: "", + autoFocus: false, }; onMenuOpen = () => { @@ -122,6 +124,7 @@ class Dropdown extends Component { value, wrapperClassName, searchable, + autoFocus, } = this.props; const formFieldProps = pick(this.props, [ @@ -155,6 +158,7 @@ class Dropdown extends Component { value={value} onOpen={onMenuOpen} onClose={onMenuClose} + autoFocus={autoFocus} /> ); diff --git a/frontend/components/forms/packs/PackForm/PackForm.tsx b/frontend/components/forms/packs/PackForm/PackForm.tsx index e7a15170b8..1823a9c817 100644 --- a/frontend/components/forms/packs/PackForm/PackForm.tsx +++ b/frontend/components/forms/packs/PackForm/PackForm.tsx @@ -91,6 +91,7 @@ const EditPackForm = ({ name="name" error={errors.name} inputWrapperClass={`${baseClass}__pack-title`} + autofocus /> )} diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx index 0a5fb0e1a4..204c372f2a 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx +++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx @@ -52,6 +52,7 @@ const AddMemberModal = ({ placeholder={"Search users by name"} disabledOptions={disabledMembers} value={selectedMembers} + autoFocus />

User not here?  diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/AutocompleteDropdown.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/AutocompleteDropdown.tsx index c1ba3504b6..45333b105e 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/AutocompleteDropdown.tsx +++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/AutocompleteDropdown.tsx @@ -26,6 +26,7 @@ interface IAutocompleteDropdownProps { disabledOptions: number[]; disabled?: boolean; className?: string; + autoFocus?: boolean; } const debounceOptions = { @@ -57,6 +58,7 @@ const AutocompleteDropdown = ({ className, disabled, disabledOptions, + autoFocus, placeholder, onChange, id, @@ -125,6 +127,7 @@ const AutocompleteDropdown = ({ filterOptions={filterOptions} multi searchable + autoFocus={autoFocus} /> ); diff --git a/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx index dc0eee7659..a37593478a 100644 --- a/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx +++ b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx @@ -76,6 +76,7 @@ const TransferHostModal = ({ onChange={onChangeSelectTeam} placeholder={"Select a team"} searchable={false} + autoFocus /> {isGlobalAdmin ? (

diff --git a/frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx b/frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx index 947721804f..9a2696eabc 100644 --- a/frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx +++ b/frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx @@ -197,6 +197,7 @@ const PackQueryEditorModal = ({ placeholder={"Select query"} value={selectedQuery?.id} wrapperClassName={`${baseClass}__select-query-dropdown-wrapper`} + autoFocus /> )} {renderPlatformCompatibility()} diff --git a/frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx b/frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx index c66c82e25b..cab84979f8 100644 --- a/frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx +++ b/frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx @@ -90,6 +90,7 @@ const NewQueryModal = ({ inputClassName={`${baseClass}__query-save-modal-name`} label="Name" placeholder="What is your query called?" + autofocus /> {renderPlatformCompatibility()} diff --git a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx index b4ad1e184d..33ed2d1888 100644 --- a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx +++ b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx @@ -240,6 +240,7 @@ const ScheduleEditorModal = ({ placeholder={"Select query"} value={selectedQuery?.id} wrapperClassName={`${baseClass}__select-query-dropdown-wrapper`} + autoFocus /> )}