goodmorningwakeup.com.au - see bug description

[karlcow]

URL: https://goodmorningwakeup.com.au/

Browser / Version: Firefox 107.0 Operating System: Mac OS X 10.15 Tested Another Browser: Yes Safari

Problem type: Something else Description: using installTrigger to change a parameter Steps to Reproduce:

1. Go to
2. Scroll down until reaching the booking form
3. Click on the date input

Expected: Widget open

Actual: Widget briefly opens in Safari and disappears right away.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20221016093143
• channel: nightly
• hasTouchScreen: false
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[karlcow]

to note that this is working on Firefox, but I also noticed that they used installTrigger for changing the parameter value for Firefox.

    var _clickTrack = function (e) {
      var d = 0;
      if ('object' === typeof InstallTrigger) d = 100;
      if (7 === _getIEVer()) d = 100;
      _processLink(_getClickTarget(e), d);
    };

[karlcow]

@ksy36 @denschub You might be interested by the installTrigger. (no issue detected so far for Firefox.)

[karlcow]

<input
  class="bookly-date-from bookly-js-date-from picker__input"
  type="text"
  value=""
  data-value="2022-10-17"
  readonly=""
  id="P1803592862"
  aria-haspopup="true"
  aria-expanded="false"
  aria-readonly="false"
  aria-owns="P1803592862_root"
/>

I can’t reproduce every time, but when I reproduce this is annoying. There’s something with layers and scroll position which is happening too.

If I do tap for the click event on the trackpad, there is no issue. If I do a press, I can reproduce the issue.

.panel-content .wrap {
    padding-bottom: 4.5em;
    padding-bottom: 9.5em;
    padding-top: 6em;
}

This is fixable by giving a bit more padding at the bottom of the .wrap element. The time “it is working” for me by chance is when the widget gets under the bottom, instead of inside.

When it goes inside, there is a visible scroll, which opens the widget and closes it right away. The scroll is happening in order to make the button visible. But there doesn’t seem to be a triggered scroll event in the page

So we could try to contact them.

[webcompat-bot]

Generate outreach template

[karlcow]

The code which makes it appear and disappear is https://goodmorningwakeup.com.au/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/js/picker.js?ver=21.1

function q() {
  B.$holder
    .on({
      keydown: u,
      "focus.toOpen": t,
      blur: function () {
        z.removeClass(y.target);
      },
      focusin: function (a) {
        B.$root.removeClass(y.focused), a.stopPropagation();
      },
      "mousedown click": function (b) {
        var c = b.target;
        c != B.$holder[0] &&
          (b.stopPropagation(),
          "mousedown" != b.type ||
            a(c).is("input, select, textarea, button, option") ||
            (b.preventDefault(), B.$holder[0].focus()));
      },
    })
    .on(
      "click",
      "[data-pick], [data-nav], [data-clear], [data-close]",
      function () {
        var b = a(this),
          c = b.data(),
          d = b.hasClass(y.navDisabled) || b.hasClass(y.disabled),
          e = h();
        (e = e && (e.type || e.href)),
          (d || (e && !a.contains(B.$root[0], e))) && B.$holder[0].focus(),
          !d && c.nav
            ? B.set("highlight", B.component.item.highlight, {
                nav: c.nav,
              })
            : !d && "pick" in c
            ? (B.set("select", c.pick), x.closeOnSelect && B.close(!0))
            : c.clear
            ? (B.clear(), x.closeOnClear && B.close(!0))
            : c.close && B.close(!0);
      }
    );
}

[karlcow]

The site is using https://github.com/amsul/pickadate.js by @amsul Checking their issues list

• https://github.com/amsul/pickadate.js/issues/935 (not enough info)
• https://github.com/amsul/pickadate.js/issues/877 (more promising)
• https://github.com/amsul/pickadate.js/issues/836 (same issue)

Some people recommend to do this

// P.$holder[0].focus()