outlookwebtest.sharepoint.com - Image from “Web search” window is not selected with single click

[softvision-oana-arbuzov]

URL: https://outlookwebtest.sharepoint.com/sites/danceclub

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

Problem type: Something else
Description: Image from “Web search” window is not selected with single click

Prerequisites:
1. Microsoft account (Enterprise) available and signed in.
2. Groups available.
Steps to Reproduce:
1. Navigate to https://outlookwebtest.sharepoint.com/sites/danceclub
2. Click “Add News” button.
3. Click “Change image” button.
4. Select “Web search”.
5. Click a category (e.g “Backgrounds”).
6. Click an image.
7. Observe behavior.

Expected Behavior:
Image is selected.

Actual Behavior:
Image is not selected.

Note:
1. Clicking the second time the image is selected.
2. Reproducible on Firefox Nightly 64.0a1 (2018-09-28), Firefox Release 62.0.2.
3. Not reproducible on Chrome 69.0.3497.100.
4. Screenshot attached.

Affected area:

<div class="bingTile_9517ba16" data-automation-id="bingTile" data-is-focusable="true" data-selection-index="0" style="width: 230.815px; height: 173.112px;" tabindex="0">
	<div class="bingTileContent_9517ba16" data-selection-invoke="true">
		<div class="ms-Image bingTileThumbnail_9517ba16 root-405" style="width: 228.815px; height: 171.112px;">
			<img alt="" role="presentation" class="ms-Image-image is-loaded ms-Image-image--cover ms-Image-image--portrait is-fadeIn image-191" src="https://tse3.mm.bing.net/th?id=OIP.nbJYdByBb1z_v-5LHasmEwHaFj&amp;pid=Api">
			</div>
			<div class="bingTileFrame_9517ba16"></div>
			<div class="bingTileCheckCircle_9517ba16" data-item-index="0" data-selection-toggle="true" data-automationid="CheckCircle">
				<div class="ms-Check root-377">
					<i data-icon-name="CircleRing" class="ms-Check-circle circle-380" role="presentation" aria-hidden="true"></i>
					<i data-icon-name="StatusCircleCheckmark" class="ms-Check-check check-381" role="presentation" aria-hidden="true"></i>
				</div>
			</div>
		</div>
		<div class="bingTileNamePlate_9517ba16">
			<a aria-label="Press enter to open the image source in a new tab." href="http://www.creativity103.com/backgrounds/pics/background01242.jpg" target="_blank" class="ms-Link root-407">www.creativity103.com</a>
		</div>
</div>

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

sv; type: enterprise-survey

From webcompat.com with ❤️

[karlcow]

so it seems on Firefox the first click is not recorded completely.
A second click will show the selection.

1.The first click changed the tabindex
2. the second click adds bingTileSelected.

This is controlled by
https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-10-12.016/0.sp-filepickercontrol_cb122ce9573ad856ead8.js

I wonder if it's a timing issue.

[karlcow]

@wisniewskit I need help for this one.

[karlcow]

@wisniewskit I really need your eyes on this one.
The devtools are not very cooperative for me. I have crashed Nightly 5 times already this morning trying to diagnose.

[wisniewskit]

According to mozregression, it turns out that this was recently fixed in Firefox nightlies in bug 1089326.

However, it's a case where an <img> is inside a <div> (with a CSS class bindTile####), not a <button>. The page expected the div to be the event target for clicks/mousedowns, but Firefox was sending the img during the first click, and sent the div only on a subsequent click on the same img. Unfortunately @miketaylr and I were unable to really figure out if there was anything more involved than that, but it seems to be a reasonable reason for the site to suddenly start working, at least.