Unable to interact with Slider component placed inside Dialog component

[MintyMods]

Hi Hunter,

I am having an issue using a slider component within a dialog component in terms of in will not allow me to change the slider value. Using the same slider outside of the dialog is fine.

The issue can be seen here by hovering over the topmost chart and clicking the 'cogs' icon which will show a dialog containing a couple of sliders and a standard html range input.

The Source Code for how I am using the dialog and slider.

I am sure this will be something wrong on my side but I can't see what is causing this so any help would be really appreciated.

[hperrin]

How weird. The third slider worked for me, but none of the others. Is that what you're seeing too?

[MintyMods]

None of the sliders within the dialog work for me and they initially render a little strange. The slider outside of the dialog (under the first chart works for me). All my testing is within Chrome but checking in Edge and the dialog only renders a single slider which doesn't work.

I did just notice the following strange behavior in Edge:-

• Open dialog and click in middle of slider - doesn't work.
• Open debugger and the slider adjusts itself to the max value and start to then work.
• Close debugger - slider remains working
• Close dialog / reopen dialog - slider remains working
• Refresh page - slider broken again until debugger opened.

Chrome does not show this behavior and just refuses to work regardless of the debugger.

I hate IE so no idea what that does and don't make me try it :)

[MintyMods]

Another observation is that the sliders are actually working if I use the keyboard i.e. left and right arrows to adjust the sliders. I also noticed that when using the mouse any click on the slider results in it instantly filling to the maximum value. e.g. click the slider then use the arrow keys to bring the slider back down works but any click will result in a jump back to the maximum value.

Very strange

[hperrin]

That's very strange behavior. Can I see your code?

[hperrin]

That's very strange behavior. Can I see your code?

[MintyMods]

Sure, I replaced the original code but have knocked up another demo showing the issue

The Svelte part of my repo with the specific code for the demo here

Thank you for taking a look.

[MintyMods]

Another observation is that resizing the browser window (by as much as a pixel) resolves the issue and the slider within the dialog then works as expected (apart from when selecting the maximum value which introduces horizontal scroll bars). It's like there is something wrong with my layout and resizing causes a repaint which recalculates the sizes and every thing works. Unfortunately my CSS skills are not great and I can not see what is causing the issue.

[MintyMods]

Managed to create a Repl showing the issue which should rule out anything within my specific code base.

[MintyMods]

@hperrin I made a bit of progress and was reading a little about the MDCDialog component where the documentation states:-

MDC Dialog makes no assumptions about what will be added to the mdc-dialog__content element. Any List, Checkboxes, etc. must also be instantiated. If your dialog contains any layout-sensitive components, you should wait until MDCDialog:opened is emitted to instantiate them (or call layout on them) so that the dialog’s transition finishes first.

NOTE: Mispositioned or incorrectly-sized elements (e.g. ripples, floating labels, notched outlines) are a strong indication that child components are being instantiated before the dialog has finished opening.

Adding the following workaround resolves my issue and the slider behaves correctly:-

  import { MDCSlider } from "@material/slider";
  import { MDCDialog } from "@material/dialog";

  onMount(() => {
    const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
    const slider = new MDCSlider(document.querySelector(".mdc-slider"));
    dialog.listen("MDCDialog:opened", () => {
      slider.layout();
    });
  });

based on the following example content:-

<Dialog class="mdc-dialog" bind:this={dialog}>
  <div id="content">
    <Content>
      <p>Current Value : {value}</p>
      <Slider
        class="mdc-slider"
        min={-500}
        max={2500}
        step={100}
        discrete
        displayMarkers />
    </Content>
  </div>
</Dialog>

I obviously don't want to add this code to each of my files where the components are used within a dialog so hopefully this will help you resolve the issue directly from your side.

[hperrin]

Thank you for looking into it. Yeah, that's definitely something that needs to be fixed. I may be able to fix it by using a context function that returns a promise when in a dialog. Then the components inside will only instantiate when the dialog is visible and the promise resolves.

[MintyMods]

I would be willing to test any changes you make. While I have a work around it's going to get untidy having to keep dropping down to the MDC components.

[hperrin]

Fixed!

[MintyMods]

Excellent, Thank you Hunter.

Any timescale for when the fix will be pushed to npm?

[hperrin]

I can push it today.

[hperrin]

I think this may be the last fixable one I have before 1.0. So I'll probably release 1.0 after finishing up some docs next week.

[MintyMods]

Installing version v1.0.0-beta.18 allows me to remove 275 lines of code while keeping the same functionality (and who doesn't like removing redundant code) so this fix is confirmed working for me.

Will there be a fix for the latest select issue (against the incoming Svelte release) within your 1.0 release as that issue is currently a show stopper for me.

Thanks again.

[hperrin]

@MintyMods, yeah, I'm working on fixing it. I know what the bug is, it's just hard to fix. :-/

[MintyMods]

No problem. Thank you for your work