Attorney Fees | Add Clearable prop to searchable dropdown

[wdrougas-tista]

Connects #14998

Description

Updated the prop of isClearable in caseflow/client/app/components/SearchableDropdown.jsx to true to allow users to clear attorney's name from searchable dropdown in the AddClaimantModal.jsx

Testing Plan

1. Go to `caseflow/client/test/app/intake/components/AddClaimantModal.test.js'

[va-bot]

	2 Warnings
⚠️	This is a Big PR. Try to break this down if possible. Stacked pull requests encourage more detailed and thorough code reviews
⚠️	This PR modifies React components — consider adding/updating corresponding Storybook file

Generated by 🚫 Danger

[codeclimate]

Code Climate has analyzed commit 0f62519 and detected 0 issues on this pull request.

View more on Code Climate.

[jcq]

FYI, you'll want to update the syntax in the PR description to "connects #14998" — the template is actually a bit confusing with that syntax

And if you have the ZenHub extension installed, you should also be able to use the "Connect this pull request with an existing issue" button at the bottom of the page; this will link this visually to the ticket in ZenHub

[jcq]

This seems good! I'm embarrassed that I missed the correct naming of the prop when updating react-select 😅

Marking this as requesting changes since we probably want to verify with designers that it's OK to default to clearable for all of the instances throughout Caseflow that use SearchableDropdown (I'm fine with it, but they should make the call)

[jcq]

Whoops, I missed this on the previous refactor! This should indeed be the prop name for the updated react-select.

[jcq]

This is totally fine, but you could have also left this prop for SearchableDropdown the same and simply switched/fixed the prop that's being passed to the react-select component below; that would have avoided the need to update all the other files (though snapshots would likely have still needed to be updated)

[jcq]

This is the only change that we should think over... while I personally prefer having dropdowns be clearable, we may want to ping @rutvigupta-design or others on design and verify that should actually be the default behavior.

[rutvigupta-design]

@wdrougas-tista @jcq I'll take a call here for the design team and say it's okay to go ahead and make this the default behavior across the dropdowns. I think there's another question here of a visual way to clear a search entry (my understanding from Will is that this doesn't provide an "x" to clear the selection) but perhaps a separate and larger conversation.

[wdrougas-tista]

@rutvigupta-design I probably need to connect with @jcq to confirm this but it seems that if we want to go ahead with this that this may require a separate ticket? I am getting a lot of merge conflicts and failing tests across the app that may be able to get corrected but think it needs a look

[rutvigupta-design]

I will mention that if it's extra work to do this across components, I am totally fine just implementing it for this specific component. The search interaction may warrant a larger conversation with the design team anyway (which doesn't block implementing this across search components)!

[jcq]

This will clear the field, but not in the way that you likely want. This (userEvent.clear) will clear the input as if you had selected the text and hit the backspace/delete key; in order to test the clearable button, you will need to do something a little different (see below).

You'll also want to be sure that the test selects a value first to be sure it properly clears.

This is a bit of edited code that should work.

it('should clear dropdown', async () => {
    render(
      <AddClaimantModal
        onSearch={performQuery}
        onCancel={onCancel}
        onSubmit={onSubmit}
      />
    );

    const input = screen.getByLabelText(/claimant's name/i);

    // Enter sufficient search, and wait for select options to show
    await userEvent.type(input, data[0].name.substr(0, 4));
    jest.advanceTimersByTime(DEBOUNCE);
    await waitFor(() => screen.getByText(data[0].name));

    // Select claimant
    await userEvent.click(screen.getByText(data[0].name));

    // Claimant name is shown
    expect(screen.queryByText(data[0].name)).toBeTruthy();

    // Use the `react-select` clear functionality
    await selectEvent.clearFirst(input);

    // Claimant name should no longer be shown
    expect(screen.queryByText(data[0].name)).not.toBeTruthy();
  });

[jcq]

Looks good!