[React-130] Custom Editor that renders a React Component Not Working

Tags: #<Tag:0x00007f8b2b7a8100> #<Tag:0x00007f8b1adb3f88>
#1

I’ve been trying to get a react component working inside a custom editor with no success so far. The documentation in this area seems to be incorrect and/or weak. Would be great to have more and complete examples in this area for those of us using a library like React.

I have replicated my issue here: https://jsfiddle.net/shartzog/b6ws27ca/.

Target Environment: (not the fiddle) Basically, inside a react app using @handsontable/react (aka <HotTable />), I’ve built and registered a custom editor class that renders a React-Bootstrap component (dropdown button) on the open() method.

Issue: Editing the field Renders the component which is immediately destroyed on any click/usage.

Additional (not shown here), when the dropdown does show on top of other cells, clicking on the option selects a new cell - which obviously fires close() / finishEditing().

Note: I’ve put the ReactDOM.render() in various methods with varying degrees of success. That’s why I ended up in the open() method after overriding the beginEditing() method to determine what is killing the edit session.

Can someone help me get this example working?

#2

Hey @SteveHartzog

I have asked our developer to share a demo for a custom editor in React.

#3

Wrong link above somehow.

https://jsfiddle.net/shartzog/5d3gb0pf/

#4

I was just wondering have you tried to build it on our official editor demo https://handsontable.com/docs/7.0.3/frameworks-wrapper-for-react-custom-editor-example.html?

#5

I started there… but the issue I’m having is putting a React component inside the editor. That example is only putting basic HTML inside it.

#6

When it comes to components being used inside the instance here’s a topic to follow

#7

This could be interesting, depending on the requirements. Based on the github issue, I’m not sure it meets our requirements.

Since we paid for handsontable, would you recommend submitting an official support request at this point?

#8

yes, please tell me what you need.

#9

I’ve requested that the license holder submit a support request – basically to make my example above work or to have a working example provided that does the same thing (shows a dropdown-type React component working inside Handsontable, which is in turn inside the @handsontable/react wrapper), to include clicking on dropdown items without destroying the editor, but actually selecting the value.

#10

I will place an official example here once we get this done.

#11

I haven’t seen an update here or over on github (https://github.com/handsontable/react-handsontable/issues/130). Any status update?

#12

I will ask our developer who’s assigned to this issue for an update.

#13

We have some test for Handsontable to write, then update the Vue - React has the 2nd priority. There’s no ETA for it yet.