The MUICSS Input element doesn't work with a ref attribute in Dio.js
rosenfeld opened this issue · comments
As you can see here, it works perfectly fine with React and works well with Dio.js until the ref attribute is set:
https://codesandbox.io/s/8z95z40962
Could you please take a look at what is causing that bug?
Sorry, it can't work on CodeSandbox as it doesn't support alias, but could you please give it a try locally setting an alias for 'react' and 'react-dom'?
The problem is not with MUICSS but with the inability of setting an alias in CodeSandbox so that it imports from dio.js rather than from react and react-dom because MUICSS explicitly requires react and react-dom, not dio.js, but you can give it a try locally and set up the alias in webpack.
I see, maybe I could set import dio from 'dio.js'; window.React = dio;. Is this what you're talking about? If so, it might work, but I'd have to load muicss from the script, I'll give it a try.
Yes, i say this because MUICSS ships a UMD build on the CDN and this should work as long as you assign dio to the window as React and ReactDOM before importing MUICSS.
Okay, here you are:
https://codesandbox.io/s/zn25j5ypnx
Change if (true) with if (false) in the header to use React instead of Dio.js in order to compare the results; Change showBug = false to showBug = true to enable the Dio.js bug when passing ref={...} to mui's Input component. This sandbox will let you reproduce both the Checkbox defaultChecked issue as well as the more serious bug when attempting to set a ref to the Input component.
Please let me know if you have any questions.
Or if you prefer the version that creates the scripts dynamically:
I could finally narrow down the root cause for this bug, so I'll create a separate ticket for that.