[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

eui/src/components/overlay_mask/overlay_mask.tsx

Lines 36 to 43 in 641732b

	keysOf(rest).forEach(key => {
	if (typeof rest[key] !== 'string') {
	throw new Error(
	`Unhandled property type. EuiOverlayMask property ${key} is not a string.`
	);
	}
	this.overlayMaskNode!.setAttribute(key, rest[key]!);
	});

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