Fix Slider issues

[troibe]

Known Issues:
Rapid clicking or rapid dragging leads to crashes.
In full screen mode Slider position coordinates are off.

Originally posted by @developandplay in #21 (comment)

[adrianomelo]

I was checking this one. It looks like Miso is trying to update the DOM, and, material-components-web.js is also trying to update the DOM. The DOM diff goes to an inconsistent state because of it. I am not sure how to debug the Miso application to verify if it is the case.

[niteria]

Is this under jsaddle? Under jsaddle even a simple vanilla-miso text input will get desynchronized. I was able to reproduce with jsaddle, but with ghcjs all of the components that interact with the Model are stuck, with no errors in the console.

[troibe]

Yes this is under jsaddle. I will look into this some more. It's interesting that jsaddle and ghcjs behaviour differs so much. Do you have any ideas why that could be?

[niteria]

Well, jsaddle is supposed to only be used for development, so while annoying it's not critical. jsaddle is laggy in general because all the logic is in the Haskell executable and the browser constantly communicates with it. I think what causes the race condition is that the communication is asynchronous. Funny coincidence because I made it async in dmjio/miso#597.

It looks like it's been reverted since in dmjio/miso#632, so I'd recommend pinning miso like so:

diff --git a/sample-app-jsaddle/default.nix b/sample-app-jsaddle/default.nix
index 58d84c9..3fc62bc 100644
--- a/sample-app-jsaddle/default.nix
+++ b/sample-app-jsaddle/default.nix
@@ -1,6 +1,6 @@
 with (import (builtins.fetchTarball {
-  url = "https://github.com/dmjio/miso/archive/1.7.1.tar.gz";
-  sha256 = "0q44lxzz8pp89ccaiw3iwczha8x2rxjwmgzkxj8cxm97ymsm0diy";
+  url = "https://github.com/dmjio/miso/archive/69f50b49adbff8217f8b51ae5f47727ee950f204.tar.gz";
+  sha256 = "1nwj40k7xfz4cc54hqgz3x51y3w5ymqp4v8gdm6229z7k6n5bvhn";
 }) {});
 {
   dev = pkgs.haskell.packages.ghc865.callCabal2nix "app" ./. { miso = miso-jsaddle; };

or any version after the revert. I've tried that, but I've run into other issues and gave up.

I see that the decoder for onInput is different from elm where it's just target.value. I was getting weird results where the decoder couldn't decode and believed the decoded value is a string. When I printed it, it looked like 2 concatenated floats.

While playing with it I also added setMin and setMax on it, but I don't know if it's necessary.

[troibe]

I finally have the time to work on this project again.
@niteria the reason for the stuck components in ghcjs are fortunately not due to any problems on Miso's side but just the simple fact that the default way of compiling ghcjs does not allow to specify external javascript dependencies afaik. To make the material components interactive however the material-components-web-elm.min.js is necessary. Therefore in the automatically generated index.html from ghcjs it's necessary to add
<script language="javascript" src="material-components-web-elm.min.js"></script>
to the header and interactivity is restored.

For jsaddle we could specify this with this line https://github.com/developandplay/material-components-web-miso/blob/562f7fe418040d094e6db79c00c2c87b02aa51a7/sample-app-jsaddle/Main.hs#L84-L85
however it seems that with the new Miso/Jsaddle versions you suggested this is not possible. Therefore I will try to find how and if there is a better way to include external javascript dependencies.

Regarding the onInput I initinally started out with trying target.value which for some reason was not defined. That's why I resorted to some other attribute in the decoder. This other attribute however seems to be of either string or integer which leads to problems with types. I'll check once more if why target.value wasn't working for me because you are right in that it should.

[troibe]

Thanks for your ghcjs observation @niteria it's now fixed with 90796df.

[troibe]

In full screen mode Slider position coordinates are off.

This is probably due to aforemny/material-components-web-elm#141 (comment) as this project depends on material-components-web-elm.min.js.

[troibe]

Regarding the onInput I initinally started out with trying target.value which for some reason was not defined. That's why I resorted to some other attribute in the decoder. This other attribute however seems to be of either string or integer which leads to problems with types. I'll check once more if why target.value wasn't working for me because you are right in that it should.

It's probably worth it to revisit this issue since with dmjio/miso#675 target.value might work as expected...