us.flow.microsoft.com - Focus pointer is positioned under the “Assigned To” field

[softvision-oana-arbuzov]

URL: https://us.flow.microsoft.com/manage/environments/Default-96278e7e-99e9-4839-88c1-22a2a1dc70ab/flows/new?gallery=public&template=d62b2527bb5343d689d5107b0922e57b&connection.shared_office365=95d2a7e9-e4fe-467d-a092-4e47-de0982b6&connection.shared_sharepointonline=shared-sharepointonl-1d38b3fb-4389-423e-9944-8b2b72886aad&connection.shared_approvals=shared-approvals-399ac8c3-8f0d-4434-b16c-7272c65ab47f

Browser / Version: Firefox ESR 60.2.2esr Operating System: Windows 10 Pro Tested Another Browser: Yes

Problem type: Design is broken Description: Focus pointer is positioned under the “Assigned To” field

Prerequisites:

1. Microsoft account (Enterprise) available and signed in.
2. Flow created (e.g “Button -> Condition,Response,Send me an email notification,Send me a mobile notification ”) Steps to Reproduce:
3. Navigate to https://us.flow.microsoft.com/manage/environments/Default-96278e7e-99e9-4839-88c1-22a2a1dc70ab/flows/new?gallery=public&template=d62b2527bb5343d689d5107b0922e57b&connection.shared_office365=95d2a7e9-e4fe-467d-a092-4e47-de0982b6&connection.shared_sharepointonline=shared-sharepointonl-1d38b3fb-4389-423e-9944-8b2b72886aad&connection.shared_approvals=shared-approvals-399ac8c3-8f0d-4434-b16c-7272c65ab47f
4. Click the “Assigned To” field.
5. Observe the focus pointer position.

Expected Behavior: The pointer is displayed inside the field.

Actual Behavior: The pointer is displayed under the field.

Note:

1. Reproducible on Firefox Nightly 64.0a1 (2018-10-18) and Firefox Release 62.0.3.
2. Not reproducible on Chrome 70.0.3538.67 and Microsoft Edge 41.16299.726.0.
3. Screenshot attached.
4. When typing inside the filed the pointer position is correct.

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

sv; type: enterprise-survey

From webcompat.com with ❤️

[karlcow]

As we can none of these boxes are real input

<div class="msla-combobox-input">
  <div class="msla-combobox-input-value-full-width">
    <div class="msla-input-control" role="textbox" tabindex="0">
      <div class="msla-input-parameter-placeholder" title="Specify to whom the approval should be assigned.">Specify to whom the approval should be assigned.</div>
      <div aria-labelledby="855FE69A-DAAA-4686-A477-308055D2CA5B" aria-required="true" class="msla-input-control-value" tabindex="-1">
        <div class="msla-input-control-token-item">
          <div class="msla-input-control-token-literal" spellcheck="false" contenteditable="true"></div>
        </div>
      </div>
    </div>
  </div>
</div>

These are divs which are positioned on top of each other. As soon as we start typing the cursor goes into the right position.

This is probably the same type of issue with line-height, fonts, etc. See #20069

[adamopenweb]

Reached out to our contacts at Microsoft directly for these enterprise issues.

[cipriansv]

I retested the issue and it is still reproducible on my side.

Tested with: Browser / Version: Firefox ESR 60.7.1esr Operating System: Windows 10 Pro

[softvision-oana-arbuzov]

The issue seems to be fixed. The cursor is displayed correctly inside the "Assigned to" field.

Tested with: Browser / Version: Firefox ESR 68.2.0esr, Firefox Nightly 72.0a1 (2019-11-21) Operating System: Windows 10 Pro