feat(listbox-popover): Tab stop for search (#1097)

* test: utils covered * fix: listbox selection dropdown anchor ref * feat: search tab stop for listbox popover * fix: optional auto focus for search field * fix: broken test * feat: change to `autoFocus` * fix: default autofocus to true in listbox popover * fix: broken rendering tests
qlik-oss · Mar 7, 2023 · a65e7a1 · a65e7a1
1 parent 45341be
commit a65e7a1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/apis/nucleus/src/components/listbox/ListBoxPopover.jsx b/apis/nucleus/src/components/listbox/ListBoxPopover.jsx
@@ -35,6 +35,7 @@ export default function ListBoxPopover({
   app,
   fieldName,
   stateName = '$',
+  autoFocus,
 }) {
   const isMasterDim = Boolean(fieldName?.qLibraryId);
   const open = show && Boolean(alignTo.current);
@@ -167,7 +168,14 @@ export default function ListBoxPopover({
         </Grid>
         <Grid item xs>
           <div ref={moreAlignTo} />
-          <ListBoxSearch selections={selections} model={model} listCount={listCount} visible />
+          <ListBoxSearch
+            visible
+            model={model}
+            listCount={listCount}
+            selections={selections}
+            keyboard={{ enabled: false }}
+            autoFocus={autoFocus ?? true}
+          />
           <ListBox model={model} selections={selections} direction="ltr" onSetListCount={(c) => setListCount(c)} />
         </Grid>
       </Grid>

diff --git a/apis/nucleus/src/components/listbox/ListBoxPopoverWrapper.jsx b/apis/nucleus/src/components/listbox/ListBoxPopoverWrapper.jsx
@@ -41,6 +41,7 @@ export default function ListBoxPopoverWrapper({ app, fieldIdentifier, stateName,
       close={handleCloseShowState}
       fieldName={fieldIdentifier}
       stateName={stateName}
+      autoFocus={options.autoFocus}
     />
   );
 }
diff --git a/apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx b/apis/nucleus/src/components/listbox/components/ListBoxSearch.jsx
@@ -23,6 +23,7 @@ export default function ListBoxSearch({
   keyboard,
   dense = false,
   visible = true,
+  autoFocus = true,
   wildCardSearch = false,
   searchEnabled,
 }) {
@@ -161,10 +162,10 @@ export default function ListBoxSearch({
       fullWidth
       placeholder={translator.get('Listbox.Search')}
       value={value}
-      autoFocus
       onFocus={handleFocus}
       onChange={onChange}
       onKeyDown={onKeyDown}
+      autoFocus={autoFocus}
       inputProps={{
         tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1,
       }}