mail.yahoo.com - Drop-down action area is small

[softvision-sergiulogigan]

URL: https://mail.yahoo.com/d/settings/4

Browser / Version: Firefox Nightly 66.0a1 (2019-01-21) (Desktop)
Operating System: Windows 10
Tested Another Browser: Yes

Problem type: Design is broken
Description: Drop-down action area is small
Steps to Reproduce:
Prerequisites:

• Login to yahoo.com

Steps to reproduce:

1. Navigate to: https://mail.yahoo.com/d/settings/4
2. Click on the "Search city" tooltip.

Expected Behavior:
The drop-down is opened.

Actual Behavior:
Nothing happens.

Notes:

1. The issue is not reproducible on Chrome Release.
2. Screenshot attached.

Watchers:
@softvision-oana-arbuzov
@softvision-sergiulogigan
@cipriansv

sv;

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

So when I click on the arrow, the drop down is working.

<div class="p_R" data-test-id="timezone-selectbox" __devtools_outlined="true">
  <div class="select is-disabled">
    <div class="typeahead-inputs-container W_6D6F p_R">
      <input
        role="combobox"
        aria-autocomplete="both"
        aria-expanded="false"
        aria-label=""
        class="select-input react-typeahead-input A_6EqO W_6D6F P_Z1HqVOA k_w p_R Z_N q_T z_0 x_0 n_0 bm_FJ bn_dBP bj_Z1TsNWR J_x G_e bj3_Z2aVTcY"
        placeholder="Rechercher la ville"
        type="text"
        spellcheck="false"
        autocapitalize="off"
        autocomplete="off"
        autocorrect="off"
        value=""
        disabled=""
      /><input
        role="presentation"
        disabled=""
        aria-hidden="true"
        class="react-typeahead-hint react-typeahead-input A_6EqO W_6D6F P_Z1HqVOA k_w J_x G_e p_a T_0 L_0 b_n I_T"
        type="text"
        spellcheck="false"
        autocapitalize="off"
        autocomplete="off"
        autocorrect="off"
        value=""
      />
    </div>
  </div>
  <span class="p_a T_0 R_0 Z_N P_fq7 cdPFi_Z1TsNWR cdPFi4_Z2aVTcY"
    ><button
      tabindex="-1"
      class="c27KHO0_n b_0 M_0 i_0 I_T y_Z2uhb3X A_6EqO r_P C_q cvhIH6_T ir3_1JO2M7 P_dRA"
      type="button"
      data-test-id="change-location"
      title="Modifier"
    >
      <span class="D_F ab_C gl_C W_6D6F"
        ><svg
          viewBox="0 0 20 20"
          class="D_X W_6Fd5 H_6Fd5 cdPFi_q cZW7ROP_n en_0 cvhIH6_T"
        >
          <path id="Path-1009" d="M5.5 7.5h9l-4.5 5z"></path></svg
      ></span></button
  ></span>
</div>

basically the click on input is not working but the click on button is working.

on macos Safari Tech Preview.

the clicking on the input creates both a drop down, and gives the ability to edit the value by hand.

[karlcow]

clicking triggers

onKeyDown: this.handleInputKeyDown

in https://s.yimg.com/nq/nr/js/mail_app_es6_vendor_Cb-vVgJrWfjpqYPajfaMrvw6cGvAGiPdHvuY1pMzSxQ_v1.js

This seems defined at two different places but it doesn't seem to be triggered at all.

        handleInputKeyDown: function(e) {
          var t = this.keyUpMapper[e.key],
            n = this.state,
            r = n.activePills;
          n.inputValue.length && e.target !== this.hiddenInput
            ? this.props.onInputKeyDown(e)
            : ((e.metaKey || e.ctrlKey) && 65 === e.keyCode
                ? this.selectAll(e)
                : "function" == typeof t
                ? t.apply(void 0, arguments)
                : 9 === e.keyCode &&
                  r.length &&
                  (this._resetActivePills(), e.preventDefault()),
              this.props.onInputKeyDown(e));
        },

and

            {
              key: "handleInputKeyDown",
              value: function(e) {
                var t = (0, c.default)(e);
                Object.keys(this.keyCodeMapper).indexOf(t) > -1 ||
                  this._handleInputKeyDown(e);
              }
            },
            {
              key: "_handleInputKeyDown",
              value: function(e) {
                var t = (0, c.default)(e);
                "Escape" === t &&
                  this.state.dropdownVisible &&
                  this.optionLength() > 0 &&
                  e.stopPropagation();
                var n,
                  r = this.keyCodeMapper[t];
                "function" == typeof r && (n = r.apply(void 0, arguments)),
                  ("boolean" != typeof n || n) && this.props.onInputKeyDown(e);
              }
            },

or maybe I'm trying to detect something else. Maybe the issue is happening before.

ah wait the state of the input is disabled if I manually remove the disabled on the first input and I click this is working.

@wisniewskit do you have an idea where/when they remove the disabled attribute.

[wisniewskit]

@karlcow, actually they are setting the disabled attribute in Chrome as well, but there is an interop issue here that is causing this breakage: Chrome still fires click events on the document for disabled inputs, but Firefox does not. I've filed bz1525207 to see what can be done about the interop issue.

In the meantime, for Firefox compat Yahoo just has to not disable the input (or to not disable the react-typeahead-hint input which is covering it, and give that a z-index:2). Or they can add a third transparent element overtop of them which catches the click events, if they'd prefer.

[karlcow]

Ah! @wisniewskit would it be a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1520869

[wisniewskit]

@karlcow, actually it was a dupe of bz1220048, and it turns out that this is undefined behavior in the spec. I've nominated that bug for webcompat discussion, as I don't see why this behavior should be left undefined to cause more compat issues.

I'm afraid that Yahoo will just have to work around it in the meantime.

[karlcow]

This seems to be fixed now.

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.