Repository: provectus/kafka-ui
Issue: Topics: make the topic name field focused
Labels: good first issue
scope/frontend
status/accepted
type/chore

<!--

Don't forget to check for existing issues/discussions regarding your proposal. We might already have it.
https://github.com/provectus/kafka-ui/issues
https://github.com/provectus/kafka-ui/discussions

-->

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->
When a new topic is created via UI, it is easier for user to key in the new topic name and fill in the rest via Tab button from the keyboard.

**Set up**
<!--
How do you run the app? Please provide as much info as possible:
1. App version (docker image version or check commit hash in the top left corner in UI)
2. Helm chart version, if you use one
3. Any IAAC configs

We might close the issue without further explanation if you don't provide such information.
-->
[6cf8fb3](https://github.com/provectus/kafka-ui/commit/6cf8fb3)

**Steps to Reproduce**
<!-- We'd like you to provide an example setup (via docker-compose, helm, etc.) 
to reproduce the problem, especially with a complex setups. -->
Steps to reproduce the behavior:

1. Go to topics and click the "Add a topic" button.
**Actual behavior**
No edit field is in the focus, while the page only has them and no other specific fields, that could not be entered from the keyboard.

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->
Topic name would be the first thing to enter on the Create topic page, and user should be able to type it straight in, without clicking on the field first.

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->


**Additional context**
<!--
(Add any other context about the problem here)
-->


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/New/New.tsx b/kafka-ui-react-app/src/components/Connect/New/New.tsx
index 2e399359425..1d3f230631a 100644
--- a/kafka-ui-react-app/src/components/Connect/New/New.tsx
+++ b/kafka-ui-react-app/src/components/Connect/New/New.tsx
@@ -133,6 +133,7 @@ const New: React.FC = () => {
             inputSize="M"
             placeholder="Connector Name"
             name="name"
+            autoFocus
             autoComplete="off"
             disabled={isSubmitting}
           />
diff --git a/kafka-ui-react-app/src/components/Schemas/New/New.tsx b/kafka-ui-react-app/src/components/Schemas/New/New.tsx
index 0d6e9d8ffa5..3e5d39c9df5 100644
--- a/kafka-ui-react-app/src/components/Schemas/New/New.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/New/New.tsx
@@ -103,6 +103,7 @@ const New: React.FC = () => {
           <Input
             inputSize="M"
             placeholder="Schema Name"
+            autoFocus
             name="subject"
             autoComplete="off"
             disabled={isSubmitting}
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
index 15f60eaaac2..ae9d429236a 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
@@ -93,6 +93,7 @@ const TopicForm: React.FC<Props> = ({
               <InputLabel htmlFor="topicFormName">Topic Name *</InputLabel>
               <Input
                 id="topicFormName"
+                autoFocus
                 name="name"
                 placeholder="Topic Name"
                 defaultValue={topicName}


Test patch: