Full row select in picker search mode (#1565)

* Full row select in picker search mode * type fix + test fix * more tests * type fixes --------- Co-authored-by: Ádám Hassan <hassana@sensenet.com>
SenseNet · Oct 30, 2023 · e503f92 · e503f92
1 parent 3d3389c
commit e503f92
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/packages/sn-pickers-react/src/components/search-picker.tsx b/packages/sn-pickers-react/src/components/search-picker.tsx
@@ -15,7 +15,7 @@ export function SearchPicker<T extends GenericContentWithIsParent = GenericConte
   const { selection, setSelection, allowMultiple } = useSelection()
 
   const onCheckedChangeHandler = useCallback(
-    (_event: React.ChangeEvent<HTMLInputElement>, node: T) => {
+    (_event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>, node: T) => {
       const newSelection = allowMultiple ? selection.filter((item) => item.Id !== node.Id) : []
       if (newSelection.length === selection.length || (!allowMultiple && selection[0].Id !== node.Id)) {
         newSelection.push(node)
@@ -69,5 +69,17 @@ export function SearchPicker<T extends GenericContentWithIsParent = GenericConte
     )
   }
 
-  return <List>{props.items.map((item) => renderItem(item as any))}</List>
+  return (
+    <List>
+      {props.items.map((item) => (
+        <div
+          data-testid="search-list-item-container"
+          onClick={(e) => onCheckedChangeHandler(e, item as any)}
+          onDoubleClick={(e) => e.stopPropagation()}
+          key={item.Id}>
+          {renderItem(item as any)}
+        </div>
+      ))}
+    </List>
+  )
 }
diff --git a/packages/sn-pickers-react/src/components/tree-picker/tree-picker.tsx b/packages/sn-pickers-react/src/components/tree-picker/tree-picker.tsx
@@ -21,7 +21,10 @@ export function TreePicker<T extends GenericContentWithIsParent = GenericContent
   })
 
   const onCheckedChangeHandler = useCallback(
-    (_event: unknown, node: T) => {
+    (
+      _event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> | React.ChangeEvent<HTMLInputElement>,
+      node: T,
+    ) => {
       if (!node.isParent) {
         const newSelection = props.allowMultiple ? selection.filter((item) => item.Id !== node.Id) : []
         if (newSelection.length === selection.length || (!props.allowMultiple && selection[0].Id !== node.Id)) {

diff --git a/packages/sn-pickers-react/tests/search-picker.test.tsx b/packages/sn-pickers-react/tests/search-picker.test.tsx
@@ -7,7 +7,7 @@ import { SelectionProvider } from '../src/context/selection'
 import { genericContentItems } from './mocks/items'
 
 describe('Search picker component', () => {
-  it('should handle selection', async () => {
+  it('should handle selection on input change', async () => {
     let wrapper: any
     await act(async () => {
       wrapper = mount(
@@ -30,6 +30,42 @@ describe('Search picker component', () => {
     expect(wrapper.findWhere((node) => node.name() === 'input' && node.prop('checked') === true)).toHaveLength(1)
   })
 
+  it('should handle selection on click', async () => {
+    let wrapper: any
+    await act(async () => {
+      wrapper = mount(
+        <SelectionProvider allowMultiple={false}>
+          <SearchPicker items={genericContentItems} repository={{} as any} />
+        </SelectionProvider>,
+      )
+    })
+
+    await act(async () => {
+      await wrapper.find(ListItem).at(3).simulate('click')
+      wrapper.update()
+    })
+
+    expect(wrapper.findWhere((node) => node.name() === 'input' && node.prop('checked') === true)).toHaveLength(1)
+
+    //Double click should not change the selection
+
+    await act(async () => {
+      await wrapper.find(ListItem).at(3).simulate('dblclick')
+      wrapper.update()
+    })
+
+    expect(wrapper.findWhere((node) => node.name() === 'input' && node.prop('checked') === true)).toHaveLength(1)
+
+    //parent Double Click should not change the selection
+
+    await act(async () => {
+      await wrapper.find(ListItem).at(3).closest("[data-testid='search-list-item-container']").simulate('dblclick')
+      wrapper.update()
+    })
+
+    expect(wrapper.findWhere((node) => node.name() === 'input' && node.prop('checked') === true)).toHaveLength(1)
+  })
+
   it('should handle multiple selection', async () => {
     let wrapper: any
     await act(async () => {