fix(listbox): prop to disable confirming selections on blur events (#866

)
qlik-oss · Jun 27, 2022 · d680826 · d680826
1 parent 88fa194
commit d680826
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -59,6 +59,7 @@ export default function ListBoxInline({ app, fieldIdentifier, stateName = '$', o
     sortByState = 1,
     scrollState = undefined,
     setCount = undefined,
+    shouldConfirmOnBlur = undefined,
   } = options;
   let { frequencyMode, histogram = false } = options;
 
@@ -210,7 +211,7 @@ export default function ListBoxInline({ app, fieldIdentifier, stateName = '$', o
   }, [selections]);
 
   const listBoxRef = useRef(null);
-  useConfirmUnfocus(listBoxRef, selections);
+  useConfirmUnfocus(listBoxRef, selections, shouldConfirmOnBlur);
 
   useEffect(() => {
     if (!searchContainer || !searchContainer.current) {

diff --git a/apis/nucleus/src/components/listbox/useConfirmUnfocus.jsx b/apis/nucleus/src/components/listbox/useConfirmUnfocus.jsx
@@ -5,7 +5,7 @@ import { useRef, useEffect, useState } from 'react';
  * user interact outside of passed element ref.
  */
 
-export default function useConfirmUnfocus(ref, selections) {
+export default function useConfirmUnfocus(ref, selections, shouldConfirmOnBlur) {
   const [_isConfirmed, _setIsConfirmed] = useState(false);
   // Wrap state in ref to use inside eventListener callback
   const isConfirmedRef = useRef(_isConfirmed);
@@ -15,6 +15,8 @@ export default function useConfirmUnfocus(ref, selections) {
   };
 
   useEffect(() => {
+    if (!shouldConfirmOnBlur) return undefined;
+
     const handleEvent = (event) => {
       const interactInside = ref.current && ref.current.contains(event.target);
       const isConfirmed = isConfirmedRef.current;
@@ -32,5 +34,5 @@ export default function useConfirmUnfocus(ref, selections) {
       document.removeEventListener('mousedown', handleEvent);
       document.removeEventListener('keydown', handleEvent);
     };
-  }, [ref, selections]);
+  }, [ref, selections, shouldConfirmOnBlur]);
 }
diff --git a/apis/nucleus/src/index.js b/apis/nucleus/src/index.js
@@ -137,6 +137,7 @@ const mergeConfigs = (base, c) => ({
  * @property {{setScrollPos:function(number):void, initScrollPos:number}} [options.scrollState=] Object including a setScrollPos function that sets current scroll position index. A initial scroll position index.
  * @property {number=} [options.sortByState=1] Sort by state, detault 1 = sort descending, 0 = no sorting, -1 sort ascending.
  * @property {function(number):void} [options.setCount=] A function that gets called with the length of the data in the Listbox.
+ * @property {boolean} [options.shouldConfirmOnBlur=] A boolean that determines if the listbox should actively confirm selections on blur events.
  */
 
 /**