consumer-travel.americanexpress.com - The text area loses focus when selecting the contents

[softvision-sergiulogigan]

URL: https://consumer-travel.americanexpress.com/flight?intlink=en-us-hp-offer-1-img

Browser / Version: Firefox Nightly 67.0a1 (2019-02-04)
Operating System: Windows 10
Tested Another Browser: Yes

Problem type: Site is not usable
Description: The text area loses focus when selecting the contents
Steps to Reproduce:

1. Navigate to: https://consumer-travel.americanexpress.com/flight?intlink=en-us-hp-offer-1-img
2. Click on the "Where from?" field.
3. Type in some text.
4. Select the typed text.

Expected Behavior:
The text is selected.

Actual Behavior:
The "Where from?" field shrinks and loses the selection.

Notes:

1. The issue is not reproducible on Chrome Canary or Chrome Release.
2. The same happens when selecting the text while the "Where from?" field is not active.
3. Screenshot attached.

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

sv;

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-sergiulogigan]

oh... webcompat/webcompat.com#2719 at large again...

[karlcow]

That smells like something related to events being fired differently in Chrome and Firefox.

[karlcow]

<div class="axp-travel-home-search__Index__from___2PBgq">
  <div class="axp-travel-home-search__index__search___3_dWe">
    <div
      class="axp-travel-home-search__ReadOnlyInput__input___2GPAO"
      data-home="true"
    >
      <div class="axp-travel-home-search__Placeholder__wrapper___3HghR">
        <div class="axp-travel-home-search__Placeholder__icon___2zB3z">
          <div style="padding-right: 14px; padding-top: 19px;">
            <svg
              width="15px"
              height="20px"
              viewBox="0 0 15 20"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g
                id="Large"
                stroke="none"
                stroke-width="1"
                fill="none"
                fill-rule="evenodd"
              >
                <g
                  transform="translate(-425.000000, -343.000000)"
                  fill="#006FCF"
                >
                  <g id="Search" transform="translate(110.000000, 226.000000)">
                    <g id="Fields" transform="translate(30.000000, 92.000000)">
                      <path
                        d="M291.718734,44.6093282 C291.041652,43.6197475 290.169258,42.3697505 289.101553,40.8593372 C287.799473,38.9843417 286.9401,37.721324 286.523434,37.0702837 C285.924477,36.132786 285.520832,35.3450272 285.312499,34.7070081 C285.104167,34.068989 285,33.3333133 285,32.4999821 C285,31.1458185 285.338541,29.8958215 286.015623,28.7499911 C286.692704,27.6041607 287.604161,26.6927041 288.749991,26.0156226 C289.895821,25.3385411 291.145818,25 292.499982,25 C293.854146,25 295.104143,25.3385411 296.249973,26.0156226 C297.395804,26.6927041 298.30726,27.6041607 298.984342,28.7499911 C299.661423,29.8958215 299.999964,31.1458185 299.999964,32.4999821 C299.999964,33.3333133 299.895798,34.068989 299.687465,34.7070081 C299.479132,35.3450272 299.075487,36.132786 298.47653,37.0702837 C298.059864,37.721324 297.200492,38.9843417 295.898412,40.8593372 L293.28123,44.6093282 C293.098939,44.8697445 292.838523,44.9999523 292.499982,44.9999523 C292.161441,44.9999523 291.901025,44.8697445 291.718734,44.6093282 Z M292.499982,35.6249747 C293.359355,35.6249747 294.09503,35.318986 294.707008,34.7070081 C295.318986,34.0950302 295.624975,33.3593551 295.624975,32.4999821 C295.624975,31.6406092 295.318986,30.904934 294.707008,30.2929561 C294.09503,29.6809782 293.359355,29.3749896 292.499982,29.3749896 C291.640609,29.3749896 290.904934,29.6809782 290.292956,30.2929561 C289.680978,30.904934 289.37499,31.6406092 289.37499,32.4999821 C289.37499,33.3593551 289.680978,34.0950302 290.292956,34.7070081 C290.904934,35.318986 291.640609,35.6249747 292.499982,35.6249747 Z"
                        id="icon---marker"
                      ></path>
                    </g>
                  </g>
                </g>
              </g>
            </svg>
          </div>
        </div>
        <div class="axp-travel-home-search__Placeholder__contentIcon___iOAY5">
          <div
            class="axp-travel-home-search__Placeholder__valueCenter___bMMTt"
            data-value="true"
          >
            Paris
          </div>
        </div>
      </div>
      <input
        name="flight_search[flight_search_slices_attributes][0][departure_search_for]"
        style="opacity: 0;"
        value="Paris"
      />
    </div>
    <div
      role="combobox"
      aria-expanded="false"
      aria-haspopup="listbox"
      aria-labelledby="downshift-0-label"
    ></div>
  </div>
</div>

1. There is a box containing the text with a div

           <div
            class="axp-travel-home-search__Placeholder__valueCenter___bMMTt"
            data-value="true"
          >
            Paris
          </div>

2. There is the input which is hidden.

      <input
        name="flight_search[flight_search_slices_attributes][0][departure_search_for]"
        style="opacity: 0;"
        value="Paris"
      />

ah but wait…

@softvision-sergiulogigan I have the same issue on macOS and Chrome Canary Version 74.0.3714.0 (Build officiel) canary (64 bits)

[softvision-sergiulogigan]

This is on Canary 74, on Windows 10 and MacOS 10.14.2, on my side.

When the field is active, I can select all the text only. Selecting only part of the text, results in the behavior described in the original report (disables the text field and deselects the text).
When the text field is inactive, selecting the text results in the text field becoming active but the text not selected.

Due to the slight difference in behavior between Chrome and Firefox, I would reinvestigate this (if it's not trivial)
What do you think, @karlcow ?

[karlcow]

yes I have similar issues. I'm not sure we should go deeper. We can move this to non-compat and if someone wants to contact them about it as a general UX issue for users that would be cool. If we had a clear cut difference (usable/unusable) in between the two browsers, that would be different.

[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.