IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Cascader: Add id prop (#84240)

Browse Source 
* Cascader: Add id prop

* Remove placeholder
This commit is contained in:
Alex Khomenko 2024-03-13 13:01:24 +01:00 committed by GitHub
parent a89f1c2200
commit 7feeb7ce4e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
View File

@ -1,7 +1,9 @@
import { act, render, screen } from '@testing-library/react';
import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { Field } from '../Forms/Field';
import { Cascader, CascaderOption, CascaderProps } from './Cascader';
const options = [
@ -118,9 +120,8 @@ describe('Cascader', () => {
expect(screen.queryByDisplayValue('First/Second')).not.toBeInTheDocument();
await userEvent.click(screen.getByPlaceholderText(placeholder));
// TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
await userEvent.click(screen.getByText('First'));
await userEvent.click(screen.getByText('Second'));
expect(screen.getByDisplayValue('First / Second')).toBeInTheDocument();
});
@ -141,9 +142,8 @@ describe('Cascader', () => {
expect(screen.queryByDisplayValue('First/Second')).not.toBeInTheDocument();
await userEvent.click(screen.getByPlaceholderText(placeholder));
// TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
await userEvent.click(screen.getByText('First'));
await userEvent.click(screen.getByText('Second'));
expect(screen.getByDisplayValue(`First${separator}Second`)).toBeInTheDocument();
});
@ -154,9 +154,8 @@ describe('Cascader', () => {
);
await userEvent.click(screen.getByPlaceholderText(placeholder));
// TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
await userEvent.click(screen.getByText('First'));
await userEvent.click(screen.getByText('Second'));
expect(screen.getByDisplayValue('Second')).toBeInTheDocument();
});
@ -165,10 +164,19 @@ describe('Cascader', () => {
render(<Cascader placeholder={placeholder} options={options} onSelect={jest.fn()} />);
await userEvent.click(screen.getByPlaceholderText(placeholder));
// TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
await userEvent.click(screen.getByText('First'));
await userEvent.click(screen.getByText('Second'));
expect(screen.getByDisplayValue('Second')).toBeInTheDocument();
});
it('should be properly associated with the Field label', () => {
render(
<Field label={'Cascader label'}>
<Cascader options={options} onSelect={jest.fn()} id={'cascader'} />
</Field>
);
expect(screen.getByRole('textbox', { name: 'Cascader label' })).toBeInTheDocument();
});
});

7
packages/grafana-ui/src/components/Cascader/Cascader.tsx
View File

@ -38,6 +38,8 @@ export interface CascaderProps {
cascader is hidden after selection. */
hideActiveLevelLabel?: boolean;
disabled?: boolean;
/** ID for the underlying Select/Cascader component */
id?: string;
}
interface CascaderState {
@ -215,7 +217,8 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
};
render() {
const { allowCustomValue, formatCreateLabel, placeholder, width, changeOnSelect, options, disabled } = this.props;
const { allowCustomValue, formatCreateLabel, placeholder, width, changeOnSelect, options, disabled, id } =
this.props;
const { focusCascade, isSearching, rcValue, activeLabel, inputValue } = this.state;
const searchableOptions = this.getSearchableOptions(options);
@ -236,6 +239,7 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
onInputChange={this.onSelectInputChange}
disabled={disabled}
inputValue={inputValue}
inputId={id}
/>
) : (
<RCCascader
@ -265,6 +269,7 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
)
}
disabled={disabled}
id={id}
/>
</div>
</RCCascader>