diff --git a/src/components/Combobox/Combobox.spec.js b/src/components/Combobox/Combobox.spec.js
index 5ba14cdf4..6171628e0 100644
--- a/src/components/Combobox/Combobox.spec.js
+++ b/src/components/Combobox/Combobox.spec.js
@@ -22,43 +22,49 @@ describe('', () => {
it('should render with empty options array', () => {
const combobox = render();
- combobox.getByTestId('combobox-input');
+ combobox.getByTestId('react-gears-combobox-input');
});
it('should show options when focused', () => {
const combobox = render();
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'true'
+ );
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'false'
+ );
});
it('should pass inputClassName to Input', () => {
const innerClassName = 'js-no-autofocus';
const combobox = render();
- assert(combobox.getByTestId('combobox-input').classList.contains(innerClassName));
+ assert(combobox.getByTestId('react-gears-combobox-input').classList.contains(innerClassName));
});
it('should have "search" as default Input type', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
assert.strictEqual(input.type, 'search');
});
it('should pass type to Input', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
assert.strictEqual(input.type, 'text');
});
it('should show all options when there is a selected option', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
OPTIONS.forEach((o) => {
@@ -70,7 +76,7 @@ describe('', () => {
const mockOnChange = sinon.spy();
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
const option = combobox.getByText('D-O');
@@ -83,43 +89,57 @@ describe('', () => {
it('should close menu on blur', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'false'
+ );
fireEvent.blur(input);
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'true'
+ );
});
it('should not close menu when menu container is focused', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
- const dropdown = combobox.getByTestId('combobox-dropdown');
- const menu = combobox.getByTestId('combobox-menu');
+ const dropdown = combobox.getByTestId('react-gears-combobox-dropdown');
+ const menu = combobox.getByTestId('react-gears-combobox-menu');
fireEvent.blur(dropdown, { relatedTarget: menu });
- expect(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden')).toEqual('false');
+ expect(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden')).toEqual(
+ 'false'
+ );
});
it('should close menu on blur of caret button', () => {
const combobox = render();
- const caret = combobox.getByTestId('combobox-caret');
+ const caret = combobox.getByTestId('react-gears-combobox-caret');
fireEvent.mouseDown(caret);
- assert.strictEqual(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+ assert.strictEqual(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'false'
+ );
fireEvent.blur(caret);
- assert.strictEqual(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+ assert.strictEqual(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'true'
+ );
});
it('should blur input on close', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
input.focus();
let option = combobox.getByText('D-O');
@@ -141,7 +161,7 @@ describe('', () => {
it('should navigate options by up/down keys', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
assert(combobox.getByText('R2-D2').classList.contains('active'));
@@ -168,7 +188,7 @@ describe('', () => {
/>
);
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.click(input);
assert.strictEqual(input.value, 'bar');
@@ -178,7 +198,7 @@ describe('', () => {
const mockOnChange = sinon.spy();
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
@@ -186,7 +206,10 @@ describe('', () => {
fireEvent.keyDown(input, { key: 'Enter', code: 13 });
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'true'
+ );
sinon.assert.called(mockOnChange);
sinon.assert.calledWith(mockOnChange, OPTIONS[1].value);
});
@@ -197,7 +220,7 @@ describe('', () => {
value = v;
};
let combobox = render();
- let input = combobox.getByTestId('combobox-input');
+ let input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
const option = combobox.getByText('D-O');
@@ -207,7 +230,7 @@ describe('', () => {
cleanup();
combobox = render();
- input = combobox.getByTestId('combobox-input');
+ input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.mouseDown(input);
fireEvent.keyDown(input, { key: 'Backspace', code: 8 });
@@ -218,55 +241,79 @@ describe('', () => {
it('should open options with down key', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'false'
+ );
- const caret = combobox.getByTestId('combobox-caret');
+ const caret = combobox.getByTestId('react-gears-combobox-caret');
fireEvent.mouseDown(caret);
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'true'
+ );
fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'false'
+ );
});
it('should open options if input is clicked', async () => {
const combobox = render();
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'true'
+ );
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.mouseDown(input);
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'false'
+ );
});
it('should open/close options with dropdown toggle', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'false'
+ );
- const caret = combobox.getByTestId('combobox-caret');
+ const caret = combobox.getByTestId('react-gears-combobox-caret');
fireEvent.mouseDown(caret);
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'true'
+ );
fireEvent.mouseDown(caret);
- assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'),
+ 'false'
+ );
});
describe('default filterOptions ', () => {
it('should filter by input (case insensitive)', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
fireEvent.change(input, { target: { value: 'bb8' } });
@@ -278,7 +325,7 @@ describe('', () => {
it('should update filtered options when input is updated', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
fireEvent.change(input, { target: { value: 'd2' } });
@@ -306,7 +353,7 @@ describe('', () => {
const combobox = render();
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
const droidLabel = combobox.getByText('Droids');
@@ -335,7 +382,7 @@ describe('', () => {
);
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
userEvent.type(input, 'new option');
@@ -360,18 +407,18 @@ describe('', () => {
/>
);
- const input = combobox.getByTestId('combobox-input');
+ const input = combobox.getByTestId('react-gears-combobox-input');
userEvent.type(input, 'new option');
- let newOptionButton = combobox.getByTestId('create-new-option');
+ let newOptionButton = combobox.getByTestId('react-gears-combobox-create-new-option');
assert(newOptionButton.hasAttribute('disabled'));
input.setSelectionRange(0, 'new option'.length);
userEvent.type(input, 'foobar');
- newOptionButton = combobox.getByTestId('create-new-option');
+ newOptionButton = combobox.getByTestId('react-gears-combobox-create-new-option');
assert(!newOptionButton.hasAttribute('disabled'));
});
@@ -393,7 +440,7 @@ describe('', () => {
let combobox = render(
);
- let input = combobox.getByTestId('combobox-input');
+ let input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.focus(input);
const option1 = combobox.getByText('D-O');
@@ -409,7 +456,7 @@ describe('', () => {
cleanup();
combobox = render();
- input = combobox.getByTestId('combobox-input');
+ input = combobox.getByTestId('react-gears-combobox-input');
fireEvent.keyDown(input, { key: 'Backspace', code: 8 });
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
index 8f9f5fb97..95a69c419 100644
--- a/src/components/Combobox/Combobox.tsx
+++ b/src/components/Combobox/Combobox.tsx
@@ -305,7 +305,7 @@ function Combobox({
return (
{
ev.preventDefault();
@@ -353,7 +353,7 @@ function Combobox({
)}
{}}
@@ -368,7 +368,7 @@ function Combobox({
({
/>