#1822 – wip

epam · Nov 16, 2022 · 079ecfd · 079ecfd
1 parent d70911e
commit 079ecfd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/packages/ketcher-react/src/script/ui/component/form/input.jsx b/packages/ketcher-react/src/script/ui/component/form/input.jsx
@@ -14,19 +14,28 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { Component } from 'react'
+import { Component, createRef } from 'react'
 
 import { omit } from 'lodash/fp'
 import classes from './input.module.less'
 import clsx from 'clsx'
 
+const inputRef = createRef() // works with errors
+
 export function GenericInput({
   schema,
   value = '',
   onChange,
   type = 'text',
+  inFocus = false,
   ...props
 }) {
+  function isInputFocused(isFocus, ref) {
+    if (!ref.current || !isFocus) return false
+    ref.current.focus()
+    return true
+  }
+
   return (
     <>
       <input
@@ -35,6 +44,9 @@ export function GenericInput({
         onInput={onChange}
         onChange={onChange}
         className={clsx(classes.input, classes.genericInput)}
+        ref={inputRef}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={isInputFocused(inFocus, inputRef)}
         {...props}
       />
       {type === 'checkbox' && <span className={classes.checkbox} />}
@@ -95,8 +107,7 @@ function Select({
       value={value}
       name={name}
       multiple={multiple}
-      className={clsx(classes.select, className)}
-    >
+      className={clsx(classes.select, className)}>
       {enumSchema(schema, (title, val) => (
         <option key={val} value={val}>
           {title}

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
@@ -53,8 +53,7 @@ function TabPanel(props) {
       role="tabpanel"
       id={`scrollable-auto-tabpanel-${index}`}
       aria-labelledby={`scrollable-auto-tab-${index}`}
-      {...other}
-    >
+      {...other}>
       {value === index && children}
     </div>
   )
@@ -126,8 +125,7 @@ const FooterContent = ({ data, tab }) => (
         tab === TemplateTabs.TemplateLibrary
           ? 'ketcher-tmpls.sdf'
           : 'ketcher-fg-tmpls.sdf'
-      }
-    >
+      }>
       {tab === TemplateTabs.TemplateLibrary
         ? 'Save template library to SDF'
         : 'Save functional groups to SDF'}
@@ -209,15 +207,15 @@ const TemplateDialog: FC<Props> = (props) => {
       result={() => result()}
       buttons={['OK']}
       buttonsNameMap={{ OK: 'Add to canvas' }}
-      needMargin={false}
-    >
+      needMargin={false}>
       <div className={classes.inputContainer}>
         <Input
           className={classes.input}
           type="search"
           value={filter}
           onChange={(value) => onFilter(value)}
           placeholder="Search by elements..."
+          inFocus={true}
         />
         <Icon name="search" className={classes.searchIcon} />
       </div>
@@ -243,14 +241,12 @@ const TemplateDialog: FC<Props> = (props) => {
                     square={true}
                     key={groupName}
                     onChange={handleAccordionChange(groupName)}
-                    expanded={shouldGroupBeRended}
-                  >
+                    expanded={shouldGroupBeRended}>
                     <AccordionSummary
                       className={classes.accordionSummary}
                       expandIcon={
                         <Icon className={classes.expandIcon} name="chevron" />
-                      }
-                    >
+                      }>
                       <Icon
                         name="elements-group"
                         className={classes.groupIcon}