Filter dropdown resize posistion

Tags: #<Tag:0x00007f8b1dbefb68> #<Tag:0x00007f8b1dbef9d8>
#1

I have a split feature in my app I can open two modules. If I open handsontable in down and up another module.

By default when I open filterdropdown by clicking header arrow button I can not see ok button of filter drop down.

My hot table and dropdown looks line below.

I want to move drop down a bit up. i tried in below ways but it is not working. It is going to infifnite loop.

  1. In befioreDropDownShow and AfterDropDownShow I tried to re posistion in this way.

const onAfterCellMouseDown = React.useCallback(
(event: MouseEvent, coords: Handsontable.CellCoords) => {
if (coords.row !== -1) {
return;
}
const clientY = event.clientY;
const clientX = event.clientX;
const hot = hotRef.current.hotInstance;
clientXRef.current = clientX;
clientYref.current = clientY;
colRef.current = coords.col;
},
[hotRef],
);

const onAfterDropDownMenuShow = React.useCallback(
(DropdownMenu) => {
const hot = hotRef.current.hotInstance;
const drpDwn = hot?.getPlugin(‘dropdownMenu’) as any;
hot.selectCell(0, colRef.current);
drpDwn.open({
top: clientYref.current - 80,
left: clientXRef.current,
});
},
[hotRef],
);

  1. I also tried to get elemnt by class name and changing the top but even that did not worked. When I did this in the chrome debugger it worked. document.getElementsByClassName(‘htDropdownMenu’)[0]

Can anyone help me to resolve this challenge.

If I comment this line hot.selectCell(0, colRef.current); in onAfterDropDownMenuShow it is not going to infinite loop but filter dropdown is not showing.

I am thinking the issue is by default dropdown is opening and I am tryign to open again or select cell is doing two times that is the reason for infinite loop.

By default when dropdown is opened I need to position a bit top.

<HotTable
ref={hotRef}
rowHeaders={false}
colHeaders={columnHeaders}
colWidths={220}
manualColumnResize={true}
fixedColumnsStart={1}
settings={cloneDeep(tableSettings)}
afterOnCellMouseDown={onAfterCellMouseDown}
afterDropdownMenuShow={onAfterDropDownMenuShow}
columnSorting
height=‘100%’
width=‘100%’
dropdownMenu={[
‘filter_by_condition’,
‘filter_operators’,
‘filter_by_condition2’,
‘filter_by_value’,
‘filter_action_bar’,
]}
filters
licenseKey=‘non-commercial-and-evaluation’
search
/>

#2

Hi @gowthamdhanekula8

you are right, calling the open() method for dropdownMenu in the afterDropdownMenuShow causes the infinite loop.

You would need to block the click on the menu element and then call the open() method with new coordinates. The closest we can get there is by calling beforeOnCellMouseDown but it doesn’t allow us to return false to block the action of showing the menu. You may need to check some native events.

#3

I have removed the afterDrpdownShow and trying to open dropdown from afterOnCellMouseDown. I have disbaled the click and dropdown is not opening and default behaviour is stopped I have not noticed infinite loop as well.

But still dropdown is not opening am I missing something?

In logs I can clearly see the cleintX and clientY , Col are correctly coming and triggering.

const onAfterCellMouseDown = React.useCallback(
(event: MouseEvent, coords: Handsontable.CellCoords) => {

  if (coords.row !== -1) {
    return;
  }

  const elements = document.getElementsByClassName('changeType') as any;
  if (elements.length) {
    Array.from(elements).forEach((elem: any) => {
      elem.style.pointerEvents = 'none';
    });
  }
  const clientY = event.clientY;
  const clientX = event.clientX;
  const hot = hotRef.current.hotInstance;
  const drpDwn = hot?.getPlugin('dropdownMenu') as any;
  hot.selectCell(0, coords.col);
  drpDwn.open({
    top: clientY,
    left: clientX,
  });
},
[hotRef],

);

#4

I have added event.stopPropagation(); and It is working dropdown is opening. Thank you.

If we don’t do stopPropagation it is clicking first row and closing I guess.

const onAfterCellMouseDown = React.useCallback(
(event: MouseEvent, coords: Handsontable.CellCoords) => {
event.stopPropagation();
if (coords.row !== -1) {
return;
}
const elements = document.getElementsByClassName(‘changeType’) as any;
if (elements.length) {
Array.from(elements).forEach((elem: any) => {
elem.style.pointerEvents = ‘none’;
});
}
if (hotRef.current) {
const clientY = event.clientY;
const clientX = event.clientX;
const hot = hotRef.current.hotInstance;
const drpDwn = hot?.getPlugin(‘dropdownMenu’) as any;
hot.selectCell(0, coords.col);
drpDwn.open({
top: clientY - 80,
left: clientX,
});
}
},
[hotRef],
);

#5

Yes, that makes sense.

I am more than happy to hear that the issue is solved. Thank you for the update.

1 Like
#6