public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions 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 14:01:24 +02:00
committed by GitHub
parent a89f1c2200
commit 7feeb7ce4e
2 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
+21 -13
View File
@@ -1,7 +1,9 @@
import { act, render, screen } from '@testing-library/react'; 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 React from 'react';
import { Field } from '../Forms/Field';
import { Cascader, CascaderOption, CascaderProps } from './Cascader'; import { Cascader, CascaderOption, CascaderProps } from './Cascader';
const options = [ const options = [
@@ -118,9 +120,8 @@ describe('Cascader', () => {
expect(screen.queryByDisplayValue('First/Second')).not.toBeInTheDocument(); expect(screen.queryByDisplayValue('First/Second')).not.toBeInTheDocument();
await userEvent.click(screen.getByPlaceholderText(placeholder)); 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'));
await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never }); await userEvent.click(screen.getByText('Second'));
await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
expect(screen.getByDisplayValue('First / Second')).toBeInTheDocument(); expect(screen.getByDisplayValue('First / Second')).toBeInTheDocument();
}); });
@@ -141,9 +142,8 @@ describe('Cascader', () => {
expect(screen.queryByDisplayValue('First/Second')).not.toBeInTheDocument(); expect(screen.queryByDisplayValue('First/Second')).not.toBeInTheDocument();
await userEvent.click(screen.getByPlaceholderText(placeholder)); 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'));
await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never }); await userEvent.click(screen.getByText('Second'));
await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
expect(screen.getByDisplayValue(`First${separator}Second`)).toBeInTheDocument(); expect(screen.getByDisplayValue(`First${separator}Second`)).toBeInTheDocument();
}); });
@@ -154,9 +154,8 @@ describe('Cascader', () => {
); );
await userEvent.click(screen.getByPlaceholderText(placeholder)); 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'));
await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never }); await userEvent.click(screen.getByText('Second'));
await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
expect(screen.getByDisplayValue('Second')).toBeInTheDocument(); expect(screen.getByDisplayValue('Second')).toBeInTheDocument();
}); });
@@ -165,10 +164,19 @@ describe('Cascader', () => {
render(<Cascader placeholder={placeholder} options={options} onSelect={jest.fn()} />); render(<Cascader placeholder={placeholder} options={options} onSelect={jest.fn()} />);
await userEvent.click(screen.getByPlaceholderText(placeholder)); 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'));
await userEvent.click(screen.getByText('First'), { pointerEventsCheck: PointerEventsCheckLevel.Never }); await userEvent.click(screen.getByText('Second'));
await userEvent.click(screen.getByText('Second'), { pointerEventsCheck: PointerEventsCheckLevel.Never });
expect(screen.getByDisplayValue('Second')).toBeInTheDocument(); 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();
});
}); });
packages/grafana-ui/src/components/Cascader/Cascader.tsx
+6 -1
View File
@@ -38,6 +38,8 @@ export interface CascaderProps {
cascader is hidden after selection. */ cascader is hidden after selection. */
hideActiveLevelLabel?: boolean; hideActiveLevelLabel?: boolean;
disabled?: boolean; disabled?: boolean;
/** ID for the underlying Select/Cascader component */
id?: string;
} }
interface CascaderState { interface CascaderState {
@@ -215,7 +217,8 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
}; };
render() { 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 { focusCascade, isSearching, rcValue, activeLabel, inputValue } = this.state;
const searchableOptions = this.getSearchableOptions(options); const searchableOptions = this.getSearchableOptions(options);
@@ -236,6 +239,7 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
onInputChange={this.onSelectInputChange} onInputChange={this.onSelectInputChange}
disabled={disabled} disabled={disabled}
inputValue={inputValue} inputValue={inputValue}
inputId={id}
/> />
) : ( ) : (
<RCCascader <RCCascader
@@ -265,6 +269,7 @@ export class Cascader extends PureComponent<CascaderProps, CascaderState> {
) )
} }
disabled={disabled} disabled={disabled}
id={id}
/> />
</div> </div>
</RCCascader> </RCCascader>