add id to code editor input fields

This commit is contained in:
Keith J. Grant 2021-04-07 14:57:05 -07:00
parent 6dd5fc937b
commit 30f08582ed
2 changed files with 9 additions and 4 deletions

View File

@ -96,11 +96,15 @@ function CodeEditor({
useEffect(
function removeTextareaTabIndex() {
const editorInput = editor.current.refEditor?.querySelector('textarea');
if (editorInput && !readOnly) {
if (!editorInput) {
return;
}
if (!readOnly) {
editorInput.tabIndex = -1;
}
editorInput.id = id;
},
[readOnly]
[readOnly, id]
);
const listen = useCallback(event => {
@ -144,7 +148,7 @@ function CodeEditor({
value={value}
onFocus={onFocus}
onBlur={onBlur}
name={id || 'code-editor'}
name={`${id}-editor` || 'code-editor'}
editorProps={{ $blockScrolling: true }}
fontSize={16}
width="100%"

View File

@ -167,7 +167,7 @@ function VariablesFieldInternals({
<label htmlFor={id} className="pf-c-form__label">
<span className="pf-c-form__label-text">{label}</span>
</label>
{tooltip && <Popover content={tooltip} id={id} />}
{tooltip && <Popover content={tooltip} id={`${id}-tooltip`} />}
</SplitItem>
<SplitItem>
<MultiButtonToggle
@ -210,6 +210,7 @@ function VariablesFieldInternals({
)}
</FieldHeader>
<CodeEditor
id={id}
mode={mode}
readOnly={readOnly}
{...field}