diff --git a/ui/src/admin/components/influxdb/CreateRoleDialog.tsx b/ui/src/admin/components/influxdb/CreateRoleDialog.tsx index 6ed6312fe..ecf1da2c4 100644 --- a/ui/src/admin/components/influxdb/CreateRoleDialog.tsx +++ b/ui/src/admin/components/influxdb/CreateRoleDialog.tsx @@ -25,6 +25,15 @@ const CreateRoleDialog = ({visible, setVisible, create}: Props) => { setName('') setVisible(false) }, []) + const onEnterPressed = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && name) { + e.stopPropagation() + create({name}) + } + }, + [name, create] + ) return ( @@ -38,6 +47,7 @@ const CreateRoleDialog = ({visible, setVisible, create}: Props) => { autoFocus={true} autoComplete="off" onChange={e => setName(e.target.value)} + onKeyPress={onEnterPressed} status={ validateRoleName(name) ? ComponentStatus.Valid diff --git a/ui/src/admin/components/influxdb/CreateUserDialog.tsx b/ui/src/admin/components/influxdb/CreateUserDialog.tsx index 068233bb9..b7312bc82 100644 --- a/ui/src/admin/components/influxdb/CreateUserDialog.tsx +++ b/ui/src/admin/components/influxdb/CreateUserDialog.tsx @@ -29,6 +29,15 @@ const CreateUserDialog = ({visible, setVisible, create}: Props) => { setPassword('') setVisible(false) }, []) + const onEnterPressed = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && name && password) { + e.stopPropagation() + create({name, password}) + } + }, + [name, password, create] + ) return ( @@ -42,6 +51,7 @@ const CreateUserDialog = ({visible, setVisible, create}: Props) => { onChange={e => setName(e.target.value)} autoFocus={true} autoComplete="off" + onKeyPress={onEnterPressed} status={ validateUserName(name) ? ComponentStatus.Valid @@ -60,6 +70,7 @@ const CreateUserDialog = ({visible, setVisible, create}: Props) => { : ComponentStatus.Default } onChange={e => setPassword(e.target.value)} + onKeyPress={onEnterPressed} autoComplete="off" testId="password--input" /> diff --git a/ui/src/style/theme/_buttons.scss b/ui/src/style/theme/_buttons.scss index 90aac026b..805a6759e 100644 --- a/ui/src/style/theme/_buttons.scss +++ b/ui/src/style/theme/_buttons.scss @@ -146,15 +146,8 @@ a.btn { text-shadow: none; border-width: 0; - // Focus State - &:focus { - background-color: $bg-color; - color: $text-color; - } - // Hover State - &:hover, - &:focus:hover { + &:hover,&:focus{ background-color: $bg-color-hover; color: $text-color-hover; cursor: pointer;