How to use React component as inline editor in a custom field?

[Omid Abdollahi]

Hi everyone.

I am using Blockly with React. I need a custom field which is a combobox that loads data from server (autocomplete).

The sample in blockly-react  shows how to use react component as custom field in a dropdown manner. but its not good idea to show a combox (which has a dropdown list) in another dropdown div.

it seem the showInlineEditor_ method is responsible to render inline edit. I guess I have to override it. 

am I in the correct path? any clue or help is appreciated.

[Beka Westberg]

Hello!

Have you checked out the custom fields documentation? It walks you through all the steps for creating a custom field (besides integrating with react of course =)

For your dropdown you'll probably want to check out the creating an editor section, that walks through the basics of the dropdown div vs the widget div. You'll probably want to use the widget div for text input, and you could use either for the dropdown options. For help with getting the text input I'd check out the showInlineEditor_ function of the text input field (but it seems you've already found that!).

So I'd say yes, you're definitely on the right path! These are just a few other resources that might be helpful :D

Best of luck with your project! If you get something working feel free to share it here. I've wanted to see someone do a implementation of a combo-box for a long time =)

Best wishes,

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/2d155420-7035-43ee-b314-f7b5cdd9acc5n%40googlegroups.com.

[Omid Abdollahi]

Thank you so much for your quick and precise answer.

I am checking the link. and as soon as I do something interesting I will share it here

[Beka Westberg]

Awesome! I hope it goes well, and I can't wait for updates :D If you have any further questions feel free to reach out

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/75473f32-19ea-48bb-9eb4-d8327f684757n%40googlegroups.com.

[Sam El-Husseini]

Hey Omid, 

You can use React to render an inline field on the block, but keep in mind that when rendering anything on the blockly Blockly expects SVG.

So to render a combo box field, you have a couple of options: 

- Use SVG to render something that looks like a combo box field, when a user clicks on the field load data from the server and display it, etc.

- Render HTML wrapped in a foreignObject. However, depending on your browser support, foreignObjects are not supported in IE11.

When rendering in the DropdownDiv, that expects HTML, and you're free to do anything you would normally do in React. Hope this helps!

Cheers,

Sam

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAEBzR958jwEZt_D_T7ueLUpAKgf_BmB-qv0aPcJxO7k%2B6JSNJQ%40mail.gmail.com.

--

Sam El-Husseini | Software Engineer | sam...@google.com 

[Omid Abdollahi]

mmm  foreignObject !!!  haven`t heard it before. 

This give me huge  possibilities.

Thank you Sam.

for some reasons I'd rather to keep my react components alive, I mean rendering not only in inline-edit state, but always. this is where using foriegnobject seems to work. now I have to revise everything. Again TNX.