Dash Custom Dropdown Component

Hi All,

I am working on a custom dropdown component which would edit just one behavior from the basic Dropdown component found in Dash Core Components (link here: https://github.com/plotly/dash-core-components/tree/dev/src). If you look through the linked files, you’ll see that the Dropdown component’s JS code is actually split into three sub-files, but the primary one I want to edit is found in the ‘fragments’ sub-folder (file link: https://github.com/plotly/dash-core-components/blob/dev/src/fragments/Dropdown.react.js).

My only edit would be to comment out line 101, with the omit function. The goal here is to have a dropdown component where the currently selected value or values remain in the dropdown options, so that for a multi dropdown the user could select the same value multiple times. I am not a JS expert but it seems like that line is what tells the component to remove the currently selected value from the options list.

As for my issues, I’ve tried creating the component twice - once by keeping the file structure of the Core Dropdown component, and once by combining the code into one file. I am able to successfully run the ‘npm run build’ command, which creates the python class with webpack JS scripts. The first issue only comes from the first version of the component multiple pages. When I try to test the component using the usage.py, I get the following error:

ChunkLoadError: Loading chunk 2 failed.

(missing: http://localhost:8050/2.dash_liquidity_components.min.js)

    at Function.o.e (http://localhost:8050/_dash-component-suites/dash_liquidity_components/dash_liquidity_components.v0_0_1m1615496004.min.js:1:713)

    at u (http://localhost:8050/_dash-component-suites/dash_liquidity_components/dash_liquidity_components.v0_0_1m1615496004.min.js:1:2305)

    at initializeLazyComponentType (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615495327.14.0.js:1450:22)

    at readLazyComponentType (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615495327.14.0.js:11997:5)

    at mountLazyComponent (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615495327.14.0.js:17467:21)

    at beginWork (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615495327.14.0.js:18737:18)

    at beginWork$1 (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615495327.14.0.js:23314:16)

    at performUnitOfWork (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615495327.14.0.js:22292:14)

    at workLoopSync (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615495327.14.0.js:22265:24)

    at performSyncWorkOnRoot (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615495327.14.0.js:21891:11)

The 2.dash_lquidity_components.min.js file did get created along with two other JS scripts when I ran ‘npm run build’, so I’m not sure why this error is happening.

The other error I run into was when I tried combining all of the script files into one. After running usage.py, the test components looks to be running correctly, i.e. it is showing the default value, and when I click the dropdown I see all the options available. However, once I select one of these other options, I get this error:

Error: Invalid argument `value` passed into ListFromDropdown with ID "input".

Value provided: {}

    at propTypeErrorHandler (http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_9_0m1615580252.dev.js:98515:9)

    at CheckedComponent (http://localhost:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_9_0m1615580252.dev.js:92763:77)

    at renderWithHooks (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615580252.14.0.js:14938:20)

    at updateFunctionComponent (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615580252.14.0.js:17169:22)

    at beginWork (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615580252.14.0.js:18745:18)

    at HTMLUnknownElement.callCallback (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615580252.14.0.js:182:16)

    at Object.invokeGuardedCallbackDev (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615580252.14.0.js:231:18)

    at invokeGuardedCallback (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615580252.14.0.js:286:33)

    at beginWork$1 (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615580252.14.0.js:23338:9)

    at performUnitOfWork (http://localhost:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_9_0m1615580252.14.0.js:22292:14)

Again, I am not very familiar with JS, but it seems like this should work the same as the Core Dropdown component.

Any help with either of these two issues would be appreciated.

Thanks

Hi, @egyur.

Did you manage to solve the first problem? I’m trying to do this: update Dropdown to accept maxHeight prop · Issue #785 · plotly/dash-core-components · GitHub. As you, I tried to create a custom component keeping the file structure of dcc and the first error that you have explained occurs.

And, how have you mixed the three JS files in one? I was considering to do that, but I don’t know how to start.

I don’t know too much about JS neither. :frowning:

Thanks in advance!