DataTable: Cell edit support Dropdown.

[xAl3xFx]

Current behavior Dropdown editors are not supported in cell edit mode for DataTable.

Reproducer

https://codesandbox.io/s/beautiful-boyd-y1tiji

Expected behavior It would be nice to have dropdown editors in DataTable using cell edit because row edit can not always replace cell edit.

• PrimeReact version: 7.2.0

[ursfan]

A DropDown can be used as a cell editor. There is no such limitation as described. Have you tried it already? In our project with PrimeReact we use a DropDown because of some limitations with help of the "cellEditValidator" property of Column, so the DropDown isn't automatically closed, when an entry of it is selected.

[IHPNULL]

You also can put the dropdown in the body property of that column, is what i do for this kind of implementation, but in this case you cant put a editor in this column.

[salvacnj]

Hello,

I'm trying to use dropdown for cell editing but newValue isn't passed correctly to the callback function, it gets the current value of dropdown, so it doesn't update correctly.

I attach two images of clicking for update

Thank you.

[ursfan]

Hello @salvacnj,

if you use the cell editor in version 7.2+ you also have to use at least the property "onCellEditComplete". Here the new chosen value can be retrieved. In addition you can use "cellEditValidator" if you want to check the chosen value before and maybe want to reject some values. You also can use the last property to prevent automatic closing of the DropDown, when you check the nodeName of the target of the originalevent and call preventDefault in case its 'BODY'.

best regards

[crkives]

I may be misunderstanding something in both your comments, but it seems to act as others describe

https://codesandbox.io/s/elegant-germain-p41tti?file=/src/demo/DataTableEditDemo.js Above example just changed the row edit example to a cell edit.

What seems to happen:

• Item in dropdown is clicked
• cellEditValidator fires
• onCellEditComplete fires
• onChange on dropdown component fires

So the dropdown editorCallback doesn't get called until the end.

[ursfan]

@crkives

Can you please check the link of your example, it doesn't work for me.

[melloware]

@ursfan i jsut tried it and it worked for me? Maybe F5 reload might fix the issue?

[boahemaa]

Hi everybody, just wanted to chime in that I'm experiencing the same problem. This would be a really useful feature if working correctly. @yigitfindikli could you give a timeline of when this might be fixed? Really appreciate your work!

[melloware]

@boahemaa this is a community tracker so unless a community member submits a PR there is no guarantee of a timeline.

From PrimeTek: "There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours"

[fx-2]

I temporarily solved the problem by using cellEditValidator cellEditValidator={(e) => { if (e.originalEvent.target.nodeName == 'LI') { return false; } return true; }}

[yaiir-a]

I'm having this problem too. Dropdown is never changing the value when its in an editable cell. It works great when a dropdown is just individual component, as well as if its in an editable row. The editable cell also works for text and date fields, but dropdown is not.

I temporarily solved the problem by using cellEditValidator cellEditValidator={(e) => { if (e.originalEvent.target.nodeName == 'LI') { return false; } return true; }}

Do you have any explanation on how to use this or why it works? Whats 'LI' in this context?

[yaiir-a]

@melloware - so is the dropdown celledit working for you or

@boahemaa this is a community tracker so unless a community member submits a PR there is no guarantee of a timeline.

From PrimeTek: "There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours"

So is it working for you, or are you also seeing issues?

[melloware]

I am just using the code sandbox provided above and it seems to be working fine in that reproducer.

[Jadiction]

I am just using the code sandbox provided above and it seems to be working fine in that reproducer.

@melloware In the "Status" column, when changing the dropdown, it doesn't update to the value you select.

For example, if I select "Out of stock," it stays to the defaulted "In stock".

[melloware]

Yep I see that now. I swear it worked the last time i tried the reproducer but its definitely not working now.

[shaiarmis]

I think I found the root cause of this bug. It happens because of a combination of:

1. The dropdown is not rendered as child of the component's direct DOM, but as a portal at the very end of the document.
2. When the cell is in edit mode, any click on the document triggers the callback defined here.

Because of (1), the isOutsideClicked(e.target) is true, and so we exit edit mode before the onCellEditComplete callback is called.

[melloware]

@shaiarmis nice detective work. Feel free to submit a PR if you think you can fix it?

[melloware]

@cerbugabriel I have to revert this fix it breaks a simple scenario in #4333

[mmisojcic]

The problem is with the triggering order of events while cell editing. editorCallback , callback you have to call to change the actual cell value. After this, onCellValidate is called, you run validations here and then onCellEditComplete, do whatever fits your use case. onCellValidate, onCellEditComplete will be triggered on cell blur. This works normally for regular inputs. But on dropdowns, you first select the value by clicking and therefore causing the cell to lose focus(blur) and trigger the onCellValidate and onCellEditComplete before the actual element got the new value. That's why nothing is changed.

What I did, I used onMouseDown , pickup the value there(somehow) and pass it to editorCallback before blur on cell occurs. I have a custom component for cell editor that wraps the Dropdown and dropdownOptions as prop, array of objects that will be used to render options. There, I looked up and find object using event.target.outerText. Probably there is a better way to get new value but you get the point.

  onMouseDown={(event) =>
      options.editorCallback &&
      options.editorCallback(
        dropdownOptions.find(
          (option) => option.naziv === event.target.outerText,
        ).id,
      )
    }

[MisterUnity]

Conclution First: give a prop appendTo="{"self"}" on DropDown maybe will be the root solving in present.

If you interested you can watch my debug process(article starts):

If anyone still face this problem, I think this is a little design mistake about compatibility between components. Org should consider about that. (PrimeReact's Problem, not ours, sorry for what I said XDD) I am using "primereact": "^9.5.0"， also got this dropdown selected value problem.

1. this is my jsx (almost same as primereact org example)

2. I put console on dropdownEditor and onCellEditComplete

3. then this is a easy ui we can watch my operation 3-1. Click Dropdown and console triggered, this is ok 3-2. Click a item 3-3. Some unexpected console msg showed, Dropdown onchange should be first. In here notice that our DataTable contains Dropdown, the status is out of edit mode, and my Dropdown still be origin.

so as mentioned what I expected is:

1. Dropdown onchange
2. Call onCellEditComplete and refresh DataTable's value to "new value".

but what we got is like:

1. DataTable exit cell's edit mode
2. Call onCellEditComplete and refresh DataTable's value to "previous value"
3. Dropdown onchange but this new value is slower so we didn't receieve the new value on corrected step 2

So what caused this? I observed other example on PrimeReact's DataTable... that's because we clicked out of the DataTable. We can sure that we click out of the DataTable, then DataTable exits the edit mode, this is true, so that means we click the DropDown and we clicked out of the DataTable too (notice 3-3 happened...).

In the end I found this problem maybe is on Dropdown component, not DataTable, please see Dropdown API bellow, appenTo default setting is document.body, that means you will finally click on body and exit the edit mode immediately, the bottom event triggered faster than Dropdown onchange apparently.

After I added a prop appendTo={"self"} the behavior is correct, I Can get the correct console order and new Value (see as bellow pic).

But there is another problem, append to self in my case will lost body height, so maybe you another case should try to adjust css. Now you know why I said this is a design problem between components, and this is org's little mistake, not ours , you are using in a correct way, and org should consider about this.

poor English sorry XD, wish can help.

[melloware]

@MisterUnity you are right appendTo={'self'} does seem to fix the issue in the original reproducer. See here: https://codesandbox.io/s/rough-currying-gmj3xh?file=/src/demo/DataTableEditDemo.js

[melloware]

Finally fixed this it will be in the next release so you don't have to do append={'self'} anymore.

[stosveta]

Hello

I'm intending filter items using dropdown in dataTable cell. When I click filter input that is shown on the top of the dropdown list - the dropdown disappears (if dropdown is not in the cell it doesn't disappear and behaves as expected). And to fix this behaviour - to be able click with the mouse on the dropdown filtering box - I do need use append={'self'} but then I start having the table layout problems.

Any help with this will be very appreciated. Thanks a lot.