mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Cascader: Add id prop (#84240)
* Cascader: Add id prop * Remove placeholder
This commit is contained in:
parent
a89f1c2200
commit
7feeb7ce4e
@ -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();
|
||||
});
|
||||
});
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user