Strange search field behavior on Amazon.com

[usagora]

Recently I noticed on Amazon.com that if you try to select all the text in the search field at the top by right-clicking and then dragging left, that if you drag left outside of the search field area, it will undo your selection. This doesn't happen on any other site I've ever visited. Very odd. I have a habit of dragging way left when I select text like this to be sure I select it all. Yes, I know i can double- or triple-click or click and then use command + a, but I'm just curious from a web development perspective what is causing this behavior. See video below and go try it yourself. Anyone know why it behaves like this?

Amazon:

MacRumors (or any other site except Amazon AFAIK):

 

[dmdewey]

When you select the text like that, your effectively losing focus with the search box and that's why it's happening. It looks like it works similarly to closing a modal window by clicking outside of it. The search's scope selector is probably not helping you either. The trick is you have to stop short of not going past the dropdown button's left side to avoid having your text deselected.

 

[usagora]

When you select the text like that, your effectively losing focus with the search box and that's why it's happening. It looks like it works similarly to closing a modal window by clicking outside of it. The search's scope selector is probably not helping you either. The trick is you have to stop short of not going past the dropdown button's left side to avoid having your text deselected.

Hey, I just discovered the issue I described ONLY happens when I use Chrome or Safari. If I use Firefox, the Amazon.com search field works correctly (text is not deselected if you click and drag past the search field). However, I'm still not experiencing this issue with any other site in Chrome or Safari, just Amazon. So strange.

Here's the actual element and its attributes in the HTML:

I'm wondering if it's a property of those CSS classes that's causing this.

 

[tiredofwonkytextboxes]

Hey, I just discovered the issue I described ONLY happens when I use Chrome or Safari. If I use Firefox, the Amazon.com search field works correctly (text is not deselected if you click and drag past the search field). However, I'm still not experiencing this issue with any other site in Chrome or Safari, just Amazon. So strange.

Here's the actual element and its attributes in the HTML:

View attachment 2003236

I'm wondering if it's a property of those CSS classes that's causing this.

I made an account just to comment on this, as I don't see it discussed elsewhere. It's definitely not just Amazon, as I've experienced the behavior on other sites (though I don't recall which at the moment), and it's also not just the search box on Amazon either. There are a handful of other text boxes around Amazon with similar behaviors. I'm trying to figure out if there's a way to stop this behavior with CSS or something similar, but I haven't narrowed down the exact cause of it in the first place yet. It's ridiculously annoying and I don't know why they started making text boxes behave like this.

 

[MacCheetah3]

Because I was curious, I decided to do some investigating and testing. I think, I narrowed down the script: 61lemL2h6EL.js

What I believe is the most relevant and probable culprit: this script is tied to the page body and includes mouseup event references/handling. The idea came to me when the loss of focus did not occur when hovering over other elements but did when releasing the mouse over any element except the “nav-search" div

Firefox’s Web Inspector makes it easy to see which elements have event listeners (as well as other attributes).

You can find the script source code using Safari’s Develop (menu) -> Show Page Resources -> Scripts

Admittedly, the amount of JS being utilized is overwhelming to me. So, I cannot explain exactly why the behavior happens. However, if anyone else is up to the task, feel free.

 

[usagora]

Because I was curious, I decided to do some investigating and testing. I think, I narrowed down the script: 61lemL2h6EL.js

What I believe is the most relevant and probable culprit: this script is tied to the page body and includes mouseup event references/handling. The idea came to me when the loss of focus did not occur when hovering over other elements but did when releasing the mouse over any element except the “nav-search" div

Firefox’s Web Inspector makes it easy to see which elements have event listeners (as well as other attributes).

You can find the script source code using Safari’s Develop (menu) -> Show Page Resources -> Scripts

Admittedly, the amount of JS being utilized is overwhelming to me. So, I cannot explain exactly why the behavior happens. However, if anyone else is up to the task, feel free.

Interesting. Definitely an unintended bug, but obviously not a high-priority fix for them.

 

[MacCheetah3]

Interesting. Definitely an unintended bug, but obviously not a high-priority fix for them.

You appear correct on the "unintended" conclusion. When clicking in the search input box, everything below the nav bar dims to enhance focus. Ignoring completing the search, which updates the page with results, you can click outside of the search bar to pull focus away. However, the focus removing actions do not execute until mouseup rather than on mousedown (i.e. you can click-and-hold, the visuals will not change). In other words, dragging and releasing the mouse/trackpad outside of the search is the same as a click (and subsequent release) on any other section of the page.

 

[usagora]

You appear correct on the "unintended" conclusion. When clicking in the search input box, everything below the nav bar dims to enhance focus. Ignoring completing the search, which updates the page with results, you can click outside of the search bar to pull focus away. However, the focus removing actions do not execute until mouseup rather than on mousedown (i.e. you can click-and-hold, the visuals will not change). In other words, dragging and releasing the mouse/trackpad outside of the search is the same as a click (and subsequent release) on any other section of the page.

So, looks like an eminently simple fix of changing the triggering event to mousedown instead of mouseup. I can't imagine what practical purpose tying the script to mouseup would have (vs mousedown). Pressing the escape key or tab key have the same effect of removing focus from the search field and "undimming" the rest of the page.

 

[MacCheetah3]

I can't imagine what practical purpose tying the script to mouseup would have (vs mousedown).

Same.

So, looks like an eminently simple fix of changing the triggering event to mousedown instead of mouseup.

Maybe not? According to the file notes, the code is based on Sizzle. One of the possible drawbacks of using third-party libraries, frameworks, etc is typically not knowing exactly how everything ties together. For example, I've encountered many unexpected behaviors with deeper/complex mods of Bootstrap-based pages. So, perhaps, there were conflicts during the implementation of Sizzle and this was Amazon's “good enough” version. Or, maybe, the Amazon devs simply implemented a few things they wanted and ignored the rest. Lastly, it could be something I have not thought of.

 

[usagora]

Maybe not? According to the file notes, the code is based on Sizzle. One of the possible drawbacks of using third-party libraries, frameworks, etc is typically not knowing exactly how everything ties together. For example, I've encountered many unexpected behaviors with deeper/complex mods of Bootstrap-based pages. So, perhaps, there were conflicts during the implementation of Sizzle and this was Amazon's “good enough” version. Or, maybe, the Amazon devs simply implemented a few things they wanted and ignored the rest. Lastly, it could be something I have not thought of.

Quite possibly. I only code from scratch in vanilla Javascript, so that's a different ballgame.

 

[MushyAvocado]

Hi, I also noticed this issue. Instead of changing the code, I made a Chrome extension that reformats the search bar so there's space to drag to the left without deselecting it. It's not a perfect solution, but it works. Here's a link to the Github repo.

(and yes, I just registered to leave this comment )

 

[ToboldHornblower]

I ALSO just registered to comment here, because this issue is so annoying.

I made a Chrome extension that reformats the search bar so there's space to drag to the left without deselecting it.

This is great 😁. BUT, does anyone know how to just make it so that when I click (just single, left-click) in the search field, all the text gets highlighted? If I really want to edit the text that is there, I can double click. Because I feel like it is more rare for me to want to edit the text than to just write a new search.