ArthurClemens/Polythene

Modular implementation of Material Design for Mithril.

Cory Mawhorter

@cmawhorter

hmmm. though i'm not sure if that's my problem or just a different problem. my link still has the onbeforeremove delay and removing that makes that error go away. dfslkjfdklsjfklerjklwjlka

Cory Mawhorter

@cmawhorter

FWIW i'm giving up and wrapping the handler in a setTimeout and a delay

Arthur Clemens

@ArthurClemens

The tabs do work fine with Mithril 2.x

Cory Mawhorter

@cmawhorter

yeah, but mithril v2 has breaking changes and my app is large and i'm dev and QA. IMO you should unpublish anything > 1.5.4 and republish as v2 since anyone upgrading from 1.5 will experience breaking changes

or remove support for mithril v1

or maybe you could publish v1.5.5 w/deps fixed :heart: ;]

Arthur Clemens

@ArthurClemens

I’ll look into it

Cory Mawhorter

@cmawhorter

i tried to put together a PR but i'm having problems getting the dev env running. thanks for all the help now and in the past Arthur!

Arthur Clemens

@ArthurClemens

@cmawhorter You can now use fixed-version-1.5.6

Carlo Guglielmin

@cgug

Noticing the Polythene tabs reset their selected state on browser resize, so if I have tab 1 selected and resize it goes back to 0. Do I need to do a manual workaround for this or am I missing a param or something?

Arthur Clemens

@ArthurClemens

It’s a bug.

Arthur Clemens

@ArthurClemens

Fix is underway

Arthur Clemens

@ArthurClemens

Released in 1.7.5

Carlo Guglielmin

@cgug

Great, thanks a lot!

Another issue I noticed is in TextField using oninput, if you type a value in, then click to move the cursor to the start of the line, then rapidly type a lot of keys the caret eventually jumps to the end of the input. I figure it's something with oninput timing with the value, as using onchange instead avoids this behaviour

Carlo Guglielmin

@cgug

m(TextField, {
    label: 'Username',
    floatingLabel: true,
    value: username,
    events: {
        oninput: function(e) {
            username = e.target.value;
        }
    }
})

Arthur Clemens

@ArthurClemens

In which browser do you see this happen?

Carlo Guglielmin

@cgug

Chromium 87 and FF 84 on Linux

Arthur Clemens

@ArthurClemens

I don’t run Linux and I also don’t see it offered on BrowserStack. I’ll try some other browsers to see if I can reproduce it.

Carlo Guglielmin

@cgug

Also was reproducable on OS X

I can reboot to Windows and try there if that helps. Seems pretty consistent so I don't think the OS matters

Arthur Clemens

@ArthurClemens

I am using Mac OS with Chromium. I don’t see it happen on any field in the kitchensink: https://arthurclemens.github.io/polythene-demos/mithril/#/textfield

Carlo Guglielmin

@cgug

I tested there as well and couldn't reproduce it earlier. But do those have oninput linked up as well as value? Because if I remove the oninput event or switch it to onchange the problem is fixed

Arthur Clemens

@ArthurClemens

No, some use TextField prop onChange

Carlo Guglielmin

@cgug

Yeah, works fine with onchange, but not oninput

Arthur Clemens

@ArthurClemens

onChange (with capital C) is not the HTML function onchange

https://github.com/ArthurClemens/polythene/blob/master/docs/components/mithril/textfield.md#reading-and-setting-the-value

Carlo Guglielmin

@cgug

Do any of them have value? Because without that the issue is also fixed

Just tested, still jumps with onChange

Arthur Clemens

@ArthurClemens

Could you create a reproducable case using this flems as base?

Carlo Guglielmin

@cgug

Sure, just adding value to the TextField does it, here it is

Arthur Clemens

@ArthurClemens

Why do you need value?

Because value sets the input value

Carlo Guglielmin

@cgug

In some cases because we're loading a saved record from mongo and need to set it to the field initially

Arthur Clemens

@ArthurClemens

In that case you need defaultValue

Carlo Guglielmin

@cgug

Do you see the caret jump I was talking about in that flems?

Arthur Clemens

@ArthurClemens

I do see it with value, not with defaultValue

Carlo Guglielmin

@cgug

Okay, I'll use defaultValue where necessary, as I agree that fixes it. Thanks!

Arthur Clemens

@ArthurClemens

The documentation of value says: "Input value; this should normally not be set - for instance Safari will move the input to the end of the string at each change"

You basically get conflicting inputs (controlled and non controlled input)

Carlo Guglielmin

@cgug

Yeah my mistake for using value that way

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

Arthur Clemens

@ArthurClemens

Correct, defaultValue is the initial value

Carlo Guglielmin

@cgug

Which unfortunately makes it the wrong fit for loading from a db where the property has an existing value beforfehand, but since value has the caret issue, seems like onchange is the workaround

Arthur Clemens

@ArthurClemens

You can also use callback function setInputState using the state object

Carlo Guglielmin

@cgug

Hmm yeah

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

Arthur Clemens

@ArthurClemens

You could use a wrapper to generalize the state management

React has the same issue: https://reactjs.org/docs/uncontrolled-components.html

Where communities thrive

People

Repo info

Activity