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
/>
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
/>
)}