Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiSelectable] Clear Searchbar Bug Fix #6317

Merged
merged 6 commits into from
Nov 2, 2022
Merged

[EuiSelectable] Clear Searchbar Bug Fix #6317

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4f1fdfc
Resolved a bug inside of EuiSelectable that prevented the options lis…
breehall Oct 18, 2022
148e5a3
Changelog
breehall Oct 18, 2022
4c9983e
Created Jest test case to validate fix for EuiSelectable issue that c…
breehall Nov 2, 2022
6d60479
Merge branch 'main' of https://github.com/breehall/eui into euiSelect…
breehall Nov 2, 2022
e7044ea
Update upcoming_changelogs/6317.md
breehall Nov 2, 2022
ff31963
Merge branch 'euiSelectable-clear-searchbar' of https://github.com/br…
breehall Nov 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/components/selectable/selectable.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* Side Public License, v 1.
*/

/// <reference types="cypress" />
/// <reference types="../../../cypress/support"/>

import React, { useState } from 'react';
Expand Down Expand Up @@ -196,6 +197,19 @@ describe('EuiSelectable', () => {
});
});

it('restores the options list when the search bar is cleared', () => {
cy.realMount(<EuiSelectableWithSearchInput />);
cy.get('input')
.type('tester123')
.then(() => {
expect(cy.get('p')).to.exist;
});

cy.get('input').clear();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not convinced this is a valid regression test of the actual bug/behavior because this already works in production. From the Slack convo describing the bug, this has nothing to do with clearing the search bar via browser/UI, this bug occurs when the consuming application is controlling the input via searchProps.value and sets it to null/undefined.

To correctly reproduce this buggy/broken behavior, I'm guessing we would need to write the test for that in Jest rather than Cypress.


expect(cy.get('li[role=option]')).to.exist;
});

it('has no accessibility errors', () => {
const onChange = cy.stub();
cy.realMount(<EuiSelectableWithSearchInput onChange={onChange} />);
Expand Down
24 changes: 12 additions & 12 deletions src/components/selectable/selectable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,28 +240,28 @@ export class EuiSelectable<T = {}> extends Component<
const { options, isPreFiltered, searchProps } = nextProps;
const { activeOptionIndex, searchValue } = prevState;

const matchingOptions = getMatchingOptions<T>(
options,
searchValue,
isPreFiltered
);

const stateUpdate: Partial<EuiSelectableState<T>> = {
visibleOptions: matchingOptions,
searchValue,
activeOptionIndex,
};

if (searchProps?.value != null && searchProps.value !== searchValue) {
stateUpdate.searchValue = searchProps.value;
}

stateUpdate.visibleOptions = getMatchingOptions<T>(
options,
stateUpdate.searchValue ?? '',
isPreFiltered
);

if (
activeOptionIndex != null &&
activeOptionIndex >= matchingOptions.length
activeOptionIndex >= stateUpdate.visibleOptions.length
Comment on lines 243 to +260
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM / no issues with the code order of operations change/moves - my main blocker with this PR is that I don't see a valid reproduction of the bug that this is fixing to QA

) {
stateUpdate.activeOptionIndex = -1;
}

if (searchProps?.value != null && searchProps.value !== searchValue) {
stateUpdate.searchValue = searchProps.value;
}

return stateUpdate;
}

Expand Down
3 changes: 3 additions & 0 deletions upcoming_changelogs/6317.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**

- Fixed `EuiSelectable` to ensure the options list is displayed when the search bar is cleared using a function
breehall marked this conversation as resolved.
Show resolved Hide resolved