DynamicConfigValueEditor: Pass ID to dynamic component and label (#69910)

Closes #66337
This commit is contained in:
kay delaney 2023-06-15 12:59:52 +01:00 committed by GitHub
parent 367faf8102
commit a65c3c1ebc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import React from 'react';
import React, { useId } from 'react';
import Highlighter from 'react-highlight-words';
import {
@ -35,6 +35,8 @@ export const DynamicConfigValueEditor = ({
const styles = useStyles2(getStyles);
const item = registry?.getIfExists(property.id);
const componentId = useId();
if (!item) {
return null;
}
@ -54,7 +56,11 @@ export const DynamicConfigValueEditor = ({
(isExpanded = false) =>
(
<HorizontalGroup justify="space-between">
<Label category={labelCategory} description={includeDescription ? item.description : undefined}>
<Label
category={labelCategory}
description={includeDescription ? item.description : undefined}
htmlFor={componentId}
>
<Highlighter
textToHighlight={item.name}
searchWords={[searchQuery]}
@ -106,6 +112,7 @@ export const DynamicConfigValueEditor = ({
}}
item={item}
context={context}
id={componentId}
/>
</Field>
</div>