Ant5 Select component not recognizing onChange handler.

Developer Support
1

I’m having an issue using ant5 Select component. I get an error :

"React does not recognize the `triggerClassName` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `triggerclassname

`
I have the select component nested inside another component, and it is named “addressInputSelect”. I am passing the props to the select component like this:

<PlasmicPersonalInfo
          personalDataForm={{
            props: {
              addressInputSelect: {
                props: {
                  placeholder: "Street Address",
                  value: addressCombined,
                  onChange: handleOnAddressSearch,
                },
              },
            },
          }}
        />

The placeholder and value work as expected. The only thing that doesn’t seem to be working is the onChange handler. Any suggestions?

2

does handleOnAddressSearch not get called at all?

3

not at all.

4

and i also tried within plasmic to set an interaction handle for the onChange event for the “addressInputSelect” component, and that interaction just ran code that did a console.log statement, and that did not get triggered either.

5

and i got the same error when i did that, the error about not recognizing triggerClassName

6

hmm, triggerClassName shouldn’t affect anything. I cannot repro locally; what’s the project?

7

i’ve already taken it out of my project, the workaround I am using is to just load the Ant component I want directly in my code

8 
personalDataForm={{
            props: {
              lastNameInput: {
                props: {
                  onChange: handleLastNameOnChange,
                },
              },
              addressInputSelect: {
                render: () => (
                  <AutoComplete
                    className="address-autocomplete"
                    options={options}
                    placeholder="Street Address"
                    value={addressCombined}
                    onChange={handleOnAddressSearch}
                  />
                ),
              },
            },
          }}
9

I just did a render override, and stuck in the component I wanted directly from Ant. and this is working fine.

10

the onChange handler gets called, and I don’t get any more errors

11

where I load

 import { AutoComplete } from "antd";

at the beginning of my file

12

project id = 85ZaAJPQLdfY2M494Vj2dZ

13

I added the component back in, and now I am not getting the error, but the onChange handler is still not firing

14 
<PlasmicPersonalInfo
          personalDataForm={{
            props: {
              lastNameInput: {
                props: {
                  onChange: handleLastNameOnChange,
                },
              },
              addressInput: {
                render: () => (
                  <AutoComplete
                    style={{ width: "100%" }}
                    options={options}
                    placeholder="Street Address"
                    value={addressCombined}
                    onChange={handleOnAddressSearch}
                  />
                ),
              },
              addressInputSelect: {
                props: {
                  placeholder: "Ant test",
                  value: addressCombined,
                  onChange: handleOnAddressSearch,
                },
              },
            },
          }}
        />
15

the element where i do the render override works, i get the onChange handler. The one where I use the ant component within plasmic, the onChange handler is not triggered.

16

hmm I tried to replicate here: https://studio.plasmic.app/projects/b8GbWqxEA9oJBeU1CSaJQH/branch/main@latest/page/%2Fpersonal-info

and I do seem to be able to get onChange called… Could you update to latest @plasmicapp/react-web just to make sure?

image.png
image.png750×735 63.5 KB

17

I now this is an old topic, but we had the problem that our JS minifier removed the call