diff --git a/webapp/src/components/createCategory/createCategory.tsx b/webapp/src/components/createCategory/createCategory.tsx index c5902f11f..6e123cf64 100644 --- a/webapp/src/components/createCategory/createCategory.tsx +++ b/webapp/src/components/createCategory/createCategory.tsx @@ -1,9 +1,9 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, { useState } from 'react' +import React, {useState, KeyboardEvent} from 'react' -import { useIntl } from 'react-intl' +import {useIntl} from 'react-intl' import Dialog from '../dialog' import Button from '../../widgets/buttons/button' @@ -20,50 +20,55 @@ type Props = { const CreateCategory = (props: Props): JSX.Element => { const intl = useIntl() - const placeholder = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.Placeholder', defaultMessage: 'Name your category' }) - const cancelText = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.CancelText', defaultMessage: 'Cancel' }) - const createText = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.CreateText', defaultMessage: 'Create' }) - const updateText = intl.formatMessage({ id: 'Categories.CreateCategoryDialog.UpdateText', defaultMessage: 'Update' }) + const placeholder = intl.formatMessage({id: 'Categories.CreateCategoryDialog.Placeholder', defaultMessage: 'Name your category' }) + const cancelText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.CancelText', defaultMessage: 'Cancel' }) + const createText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.CreateText', defaultMessage: 'Create' }) + const updateText = intl.formatMessage({id: 'Categories.CreateCategoryDialog.UpdateText', defaultMessage: 'Update' }) const [name, setName] = useState(props.initialValue || '') + const handleKeypress = (e: KeyboardEvent) => { + if (e.key === 'Enter') { + props.onCreate(name) + } + } + return ( -
-
-

{props.title}

- setName(e.target.value)} - autoFocus={true} - maxLength={100} - /> -
- - -
+
+

{props.title}

+ setName(e.target.value)} + autoFocus={true} + maxLength={100} + onKeyUp={handleKeypress} + /> +
+ +
- +
) }