[Bug]: ComboBox: onChange is not called when building the code in production mode

[flannanl]

Package

@carbon/react

Browser

No response

Package version

v1.71

React version

No response

Description

This is a regression caused by #18041. When using webpack to build the code in "production" mode (not sure if it is caused by the minimizer or something), the downshift type is behaving different, and this is causing the onChange not to be fired at all. It works, however, if I build the code for local development without minimizing / ugilify the JS.

So I have added a few console.log statements to prove the behaviour.

    onStateChange: _ref6 => {
      let {
        type,
        selectedItem: newSelectedItem
      } = _ref6;
      console.log('type', type)
      console.log('selectedItemProp', selectedItemProp)
      console.log('newSelectedItem', newSelectedItem)
      console.log('fire onChange 1', type === '__item_click__' && !isEqual(selectedItemProp, newSelectedItem))
      console.log('fire onChange 2', type === '__function_select_item__' || type === '__input_keydown_enter__')
      if (type === '__item_click__' && !isEqual(selectedItemProp, newSelectedItem)) {
        onChange({
          selectedItem: newSelectedItem
        });
      }
      if (type === '__function_select_item__' || type === '__input_keydown_enter__') {
        onChange({
          selectedItem: newSelectedItem
        });
      }
    },

When building the code for local development, I see these printed in the console as:

type __input_click__
ComboBox.js:460 selectedItemProp null
ComboBox.js:461 newSelectedItem undefined
ComboBox.js:462 fire onChange 1 false
ComboBox.js:463 fire onChange 2 false

ComboBox.js:459 type __item_click__
ComboBox.js:460 selectedItemProp null
ComboBox.js:461 newSelectedItem {id: '471af655-c123-52a6-5c79-aed05c34aaf7', name: 'flo21-apikey', name_escaped: 'flo21-apikey', group_id: 'default', group_name: 'Default', …}
ComboBox.js:462 fire onChange 1 true
ComboBox.js:463 fire onChange 2 false

ComboBox.js:459 type __function_set_highlighted_index__
ComboBox.js:460 selectedItemProp null
ComboBox.js:461 newSelectedItem undefined
ComboBox.js:462 fire onChange 1 false
ComboBox.js:463 fire onChange 2 false

When building the code for production, I see these printed in the console instead:

type 10
app.js:2 selectedItemProp null
app.js:2 newSelectedItem undefined
app.js:2 fire onChange 1 false
app.js:2 fire onChange 2 false

app.js:2 type 13
app.js:2 selectedItemProp null
app.js:2 newSelectedItem {id: '3ba3f4d5-7b58-ad7c-8868-bae913fe4a13', name: 'my-dynamic-api-key', name_escaped: 'my-dynamic-api-key', group_id: 'default', group_name: 'Default', …}
app.js:2 fire onChange 1 false
app.js:2 fire onChange 2 false

app.js:2 type 18
app.js:2 selectedItemProp null
app.js:2 newSelectedItem undefined
app.js:2 fire onChange 1 false
app.js:2 fire onChange 2 false

app.js:2 type 22
app.js:2 selectedItemProp null
app.js:2 newSelectedItem undefined
app.js:2 fire onChange 1 false
app.js:2 fire onChange 2 false

app.js:2 type 18
app.js:2 selectedItemProp null
app.js:2 newSelectedItem undefined
app.js:2 fire onChange 1 false
app.js:2 fire onChange 2 false

As you can see, the type is now an integer rather than a string, which causing the onChange handler never be called.

Because this only fails in "production" code, our unit tests are not able to catch the problem.

Reproduction/example

N/A

Steps to reproduce

See description.

Suggested Severity

Severity 1 = Must be fixed ASAP. The response must be swift. Someone from the team must drop all current work and be immediately reassigned to address the issue.

Application/PAL

IBM Projects

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[a88zach]

+1 Same issue with production build. Using next.js

[a88zach]

@Neues, can you take a look at the PR linked above that fixes this issue?

[Neues]

@a88zach I am not able to add myself as a reviewer and give an approval but the changes look good to me.

[harishjanardhanan]

Facing same issue. Using react.js

[rajat-ninawe-pnipl]

Its happening for me as well in production mode only.

[k02pradeep]

+1