Eui: [EuiCodeEditor] does not work well with EuiFormRow to assign a label

[myasonik]

When using EuiCodeEditor inside of EuiFormRow there is no convenient way to assign a an id to the textarea.

In places Kibana has started to shim this after render but inconsistently and in Kibana probably isn't the best place to do this anyway.

Example of what I mean: editor_example.tsx#L34-L45

I'm not sure what the best solution is here because I know EuiCodeEditor has its hands tied by react-ace a little. Will probably need to explore if the best solution can be implemented in EuiCodeEditor or in EuiFormRow.

[anishagg17]

@myasonik i am working on it and will soon update you

[anishagg17]

currently reacct-ace doesn't has an id prop that's why this problem is occurring I have raised an issue in react-ace library to fix this .

[myasonik]

In the mean time, can we do a fix similar to what was done in kibana? After render, query the dom for a textarea, then apply an id to that.

@thompsongl @chandlerprall does that sound like an all right interim solution? (Given that we don't know when/if react-ace will fix their hole and then when/if we'll update after that)

[chandlerprall]

Taking this a little further, we could support any additional attributes (limited to id + aria stuff, maybe?) with an approach similar to https://github.com/elastic/eui/blob/641732b1011a9455c70156cefb58c8c32d11feeb/src/components/overlay_mask/overlay_mask.tsx#L36-L43

i.e. have EuiCodeEditor accept an additional prop, an object with whatever attributes we want to support, and set those attribute/values after mount

[anishagg17]

@myasonik do i need to apply a post-render update for this?

[myasonik]

Yes, this issue and #2960 should be fixed with the solution @chandlerprall posted above.

Make a new object prop called textareaProps.
After render of the component, apply any props from textareaProps to the textarea rendered.

[anishagg17]

Working on this would update shortly

[anishagg17]

@myasonik this technique has solved the issue, I will make a pr when one of my or gets closed