[ComboBox]: prevent component props mutation.

[alllx]

WHY are these changes introduced?

Because of unexpected search options result was displayed like unexpected options result or duplicated options (see animation below).

Fixes #2764

WHAT is this pull request doing?

Prevents passed component props mutation.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

🟢 This pull request modifies 3 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/Autocomplete/Autocomplete.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Autocomplete/components/ComboBox/ComboBox.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/Autocomplete/Autocomplete.tsx

🧩 src/components/Autocomplete/tests/Autocomplete.test.tsx (total: 0)

Files potentially affected (total: 0)

[dleroux]

How were you able to tophat your actionsBefore and actionsAfter changes?

actionsBefore throws an error: Maximum update depth exceeded, and I'm seeing actionsAfter. If you got this to work can you provide a playground?

[BPScott]

I'm not familiar with AutoComplete, so I'm probably not the best person to review this, looks like @dleroux has got your back though

[alllx]

How were you able to tophat your actionsBefore and actionsAfter changes?

actionsBefore throws an error: Maximum update depth exceeded, and I'm seeing actionsAfter. If you got this to work can you provide a playground?

Let me double check this in Playground, there is a test which is passed: src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx:191

[alllx]

I'm not familiar with AutoComplete, so I'm probably not the best person to review this, looks like @dleroux has got your back though

Hey @dleroux, I checked actionBefore on Polaris master branch, same error, so I didn't introduce this error. This issue should be tackled in the separate PR.
Here is my Playground.tsx code please check it in storybook on master.

import React from 'react';
import {CirclePlusMinor} from '@shopify/polaris-icons';

import {Page, Autocomplete} from '../src';

export function Playground() {
  const textField = (
    <Autocomplete.TextField
      onChange={(value) => console.log(value)}
      label=""
      value=""
      placeholder="placeholder"
    />
  );
  return (
    <Page title="Playground">
      <Autocomplete
        options={[
          {
            label: 'label 1',
            value: '1',
          },
          {
            label: 'label 2',
            value: '2',
          },
        ]}
        selected={['1']}
        onSelect={() => console.log('update')}
        textField={textField}
        actionBefore={{
          content: "Add 'f'",
          icon: CirclePlusMinor,
          id: 'ComboBox3-0',
        }}
      />
    </Page>
  );
}

[dleroux]

The code looks good, but mine keeps crashing, even with your playground on master. I've reopened the issue that was closed. Hopefully someone has time to tackle it soon but that's another issue.

[dleroux]

I'm approving based on the code but hopefully someone else can tophat that prop can do the same. @AndrewMusgrave ?

[ghost]

🎉 Thanks for your contribution to Polaris React!