You basically get conflicting inputs (controlled and non controlled input)
defaultValue doesn't update the field if the service call takes a while to return, even with a redraw, so I might go with the onchange instead (lowercase intentional) since that wasn't jumping, and will just fire on blur instead of input
Probably not worth the clunkiness of having to maintain setInputState for 10+ fields on a complex page
I guess I was hoping TextField could be a drop-in replacement for an HTML
input, since there you can set value and oninput without any caret jumping
React has the same issue: https://reactjs.org/docs/uncontrolled-components.html
Instead of using the callback, you could use a more Mithril-like way by storing the dom node once it is available and set the value of the input element
But this only works nicely when there is no initial value, otherwise the field gets visibly re-initialized.
The tests contain an example with Powerform. You can see the result at the bottom of https://arthurclemens.github.io/polythene-demos/mithril/#/textfield
Feature request: could keyboard support be added to some components, such as Tabs and Menu?
The kitchen sink contains a couple of examples of keyboard control: List "Keyboard control" and Search "Search results". This could be generalized.
What's the behavior you're looking for?
I guess with tabIndex
That way nothing special needs to be build to capture focus
Fox menus it's more tricky, because you need to set the focus to the first item in the list once it is opened
If you go to https://arthurclemens.github.io/polythene-demos/mithril/#/tabs you'll see that using TAB you can move focus from tab to tab
and use ENTER to select it
Hello, after a recent npm update I'm suddenly getting problems building my app. Many errors showing:
Can't import the named export 'useState' from non EcmaScript module (only default export is available)Anyone else seeing this, and any ideas of how to fix?
Let me know if you need more info.
Cheers, d
Messages for each polythene component:
ERROR in ./node_modules/polythene-mithril-ripple/dist/polythene-mithril-ripple.mjs 9:12-20
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
@ ./node_modules/polythene-mithril/dist/polythene-mithril.mjs
@ ./js/router.js$ npm list --depth=0
clients.londoncarhire.com@0.0.1 /home/dm/Documents/websites/clients.londoncarhire.com
├── @babel/cli@7.13.16
├── @babel/core@7.14.0
├── @babel/plugin-transform-runtime@7.13.15
├── @babel/preset-env@7.14.0
├── @babel/runtime@7.14.0
├── babel-loader@8.2.2
├── comlink@4.3.0
├── mithril@2.0.4
├── polythene-css@1.7.5
├── polythene-mithril@1.7.5
├── powerform@3.1.5
├── webpack-cli@3.3.12
└── webpack@4.46.0
To handle modules in webpack 4, you need a separate loader entry:
{
type: 'javascript/auto',
test: /\.mjs$/,
use: {
loader: 'babel-loader',
options: {},
},
},I have this in my webpack.config.js:
// webpack.config.js
module.exports = {
externals: {
'jquery': 'jQuery',
'lodash': 'lodash',
'luxon': 'luxon',
'moment': 'moment',
'interact': 'interact',
'mui': 'mui',
'exif': 'EXIF',
'velocity': 'Velocity',
'Jodit': 'Jodit'
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}],
},
devtool: 'nosources-source-map'
}Do I add your object in to rules array, or do I incorporate it into the existing object?
Thanks for the kind words.
No, there hasn't been a major change. Perhaps one of your bundler dependencies was updated?
No, there hasn't been a major change. Perhaps one of your bundler dependencies was updated?
How bundlers handle modules is still in flux. For webpack 5 you will need
{
type: 'javascript/auto',
test: /\.mjs$/,
resolve: {
fullySpecified: false,
},
use: {
loader: 'babel-loader',
options: {},
},
},Thank you for that, Arthur - I had got too many errors on previous attempts at upgrading to webpack 5. This works (after adjusting my scripts in package.json to:
"scripts": {
"build": "webpack",
"start": "webpack ./js/router.js --output-path ./js/ --output-filename app.js --mode=development --watch"
},but I might revert for the time being, since I'm no longer able to build in my original source scripts for debugging (previously devtool: 'nosources-source-map' in webpack.config.js). Now only the transpiled sources are output.