Select text input content on trapFocus #2106

FCalabria · 2022-11-07T16:51:28Z

PR Summary:

Select text input's content when automatically focusing it

Why are these changes introduced?

This affects the search input on the header, that gets focused automatically when the user clicks on the "search" icon. The behaviour mimics the browser default when tabbing into an input, but I restricted it to text types to avoid causing UX problems or bugs on other kinds of inputs (passwords, dates, etc).

What approach did you take?

Use the native setSelectionRange function

Visual impact on existing themes

Gif preview

Demo links

Store
Editor

Checklist

Added PR summary for release notes
Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
Followed theme code principles
Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

ludoboludo · 2022-11-07T21:53:28Z

assets/global.js

+  if (elementToFocus.tagName === 'INPUT' &&
+    ['search', 'text', 'email', 'url'].includes(elementToFocus.type) &&
+    elementToFocus.value) {
+    const end = elementToFocus.value.length;
+    elementToFocus.setSelectionRange(0, end);
+  }


since this is in the trapFocus() function this will only run when we're trapping the focus. But won't happen anywhere else on inputs. So for example on the about us page for the os2-demo store, it won't do anything on the contact us form fields.

We currently run trapFocus() on:

the cart drawer

the cart notification

modals using the detais-modal custom HTML element (search, password page modal to enter password)

the menu drawer

the modal-dialog custom HTML element

the pickup availability drawer

In all those cases, I think the search is the only scenario where the element receiving focus due to our trapFocus function is an input element.

I'm not sure if introducing this behaviour only for that one specific part of the theme makes sense when the rest of the input don't get the same behaviour on focus 🤔

But then having a listener for focusin on all inputs of the theme might be a bit much. Not sure.

What do you think ? 🤔

Adding this on every focusin event will select the value also when the user focuses the input by clicking on it, which I don't think is a good UX since they might be clicking exactly in the point were they want their cursor.

If there were some way to know if a focus has being triggered programatically or not (or by a mouse click) it could be a nice improvement for the theme, but I don't know any reliable way to do that.

Adding this on every focusin event will select the value also when the user focuses the input by clicking on it, which I don't think is a good UX since they might be clicking exactly in the point were they want their cursor.
💯

I'll approve the PR 👍 Though we should wait a bit before merging (once you get the second approval).

sofiamatulis

Looks good 👍 Thanks for making the change. Added some small nitpicks

sofiamatulis · 2022-11-08T15:15:50Z

assets/global.js

  document.addEventListener('focusout', trapFocusHandlers.focusout);
  document.addEventListener('focusin', trapFocusHandlers.focusin);

  elementToFocus.focus();


Search only focuses when I close and re-enter the field:https://screenshot.click/08-12-xeqqs-dai70.mp4

That doesnt happen for the other inputs: https://screenshot.click/08-15-5ykcg-12f5p.mp4

Is that expected? 👀

Interesting, I cannot reproduce that https://screenshot.click/10-59-0u5in-jynpn.mp4
What browser are you using? You are just tabbing around, right?

I am using chrome and just tabbing 🤔 Am I missing something?

https://screenshot.click/10-34-j4hjv-6b43g.mp4

This is meant to be that way based on how it's added in the code:

since this is in the trapFocus() function this will only run when we're trapping the focus. But won't happen anywhere else on inputs. So for example on the about us page for the os2-demo store, it won't do anything on the contact us form fields.

We currently run trapFocus() on:

the cart drawer

the cart notification

modals using the detais-modal custom HTML element (search, password page modal to enter password)

the menu drawer

the modal-dialog custom HTML element

the pickup availability drawer

In all those cases, I think the search is the only scenario where the element receiving focus due to our trapFocus function is an input element.

Interesting 🤔 Then how come Paqui is able to do it in her video? https://screenshot.click/10-59-0u5in-jynpn.mp4

That should be standard browser behaviour, it's not due to any change i have done

What I mean is that the text input's content is selected when automatically focusing it on your video but not in mine

We paired and it turns out that you need to use shift tab and it does select it then :)

assets/global.js

ludoboludo

LGTM

* Select text input content on trapFocus * PR fix

commit dc81806 Author: Ken Meleta <[email protected]> Date: Tue Nov 22 13:32:46 2022 -0700 Add media sizing settings to featured product (Shopify#2114) commit 9875aea Author: Ken Meleta <[email protected]> Date: Tue Nov 22 13:17:55 2022 -0700 Adjust constrain media values for quick add modal (Shopify#2113) * Adjust constrain media values for quickadd * Adjust offset logic * Minor formatting fix commit 2eb8bf6 Author: Ludo <[email protected]> Date: Tue Nov 22 11:50:50 2022 -0500 Add fixed sizes for some images to prevent errors (Shopify#2087) * remove the mention of sizes where unnecessary * remove another instance * add fixed size to the images in structured data * adjust size to 1920 * edit logo size in structured data * remove conditional info * change value to match other logo size values commit 2f9b9f3 Author: Ludo <[email protected]> Date: Mon Nov 21 15:44:24 2022 -0500 Remove alt attribute in image_tag filter where unnecessary (Shopify#2117) * Add fallback to alt attribute where image_tag filter is used * remove unnecessary use of alt attribute in image_tag filter commit 251e5d9 Author: Ludo <[email protected]> Date: Mon Nov 21 12:18:44 2022 -0500 Move share button into a snippet (Shopify#2123) * Move share button into a snippet * change the property name to context and add details in snippet * address review comments * edit props names and description * Address reviewers comment. Remove unused prop and edit existing ID * move script at the top commit 539af27 Author: Eugene Kasimov <[email protected]> Date: Mon Nov 21 09:01:58 2022 -0800 Prettier liquid files snippets. (Shopify#2115) commit 503fdf8 Author: Eugene Kasimov <[email protected]> Date: Thu Nov 17 08:51:21 2022 -0800 Remove noscript css import for product recommendations (Shopify#2101) commit b2b01fd Author: Eugene Kasimov <[email protected]> Date: Thu Nov 17 08:50:33 2022 -0800 Change variables names (Shopify#2055) commit cf05d0d Author: Francisca Calabria Rubio <[email protected]> Date: Thu Nov 17 16:50:55 2022 +0100 Select text input content on trapFocus (Shopify#2106) * Select text input content on trapFocus * PR fix commit b86d1f3 Author: Ken Meleta <[email protected]> Date: Thu Nov 17 08:50:43 2022 -0700 Change thumbnail media fit to "fill" by default (Shopify#2044) * Change thumbnail media fit to cover by default * Simplify and cleanup thumbnail fit approach commit 8ab8e61 Author: Ludo <[email protected]> Date: Thu Nov 17 10:50:28 2022 -0500 Tweak the image_url size to be the max value where necessary (Shopify#2110) * Tweak the image_url size to be the max value where necessary * fix sizing in the header. commit c337301 Author: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Date: Thu Nov 17 10:49:52 2022 -0500 Update 1 translation file (Shopify#2130) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> commit bc8f433 Author: Ken Meleta <[email protected]> Date: Thu Nov 17 08:49:10 2022 -0700 Add constrain media and media fit settings to product page (Shopify#2052) * Add constrain height setting * Add constrain scaling functionality * Add media fit setting and functionality * Quick add override and typo fixes * Update setting language and code cosmetics * Update 8 translation files * Update 5 translation files * Update 3 translation files * Update 3 translation files * Update 1 translation file * Add comment Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

* Select text input content on trapFocus * PR fix

Select text input content on trapFocus

5daa821

FCalabria requested review from ludoboludo and sofiamatulis November 7, 2022 17:01

ludoboludo reviewed Nov 7, 2022

View reviewed changes

ludoboludo previously approved these changes Nov 8, 2022

View reviewed changes

sofiamatulis self-assigned this Nov 8, 2022

sofiamatulis reviewed Nov 8, 2022

View reviewed changes

PR fix

bc2068e

FCalabria dismissed ludoboludo’s stale review via bc2068e November 10, 2022 10:02

ludoboludo approved these changes Nov 10, 2022

View reviewed changes

ludoboludo self-assigned this Nov 10, 2022

sofiamatulis approved these changes Nov 15, 2022

View reviewed changes

ludoboludo merged commit cf05d0d into main Nov 17, 2022

ludoboludo deleted the select-input-content-on-focustrap branch November 17, 2022 15:50

chavdar-ang pushed a commit to chavdar-ang/lermitage that referenced this pull request Nov 20, 2022

Select text input content on trapFocus (Shopify#2106)

49e723d

* Select text input content on trapFocus * PR fix

phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024

Select text input content on trapFocus (Shopify#2106)

1d2ce7c

* Select text input content on trapFocus * PR fix

lost-end-found pushed a commit to lostendfound/librairiesanstitre-shopify that referenced this pull request Oct 8, 2025

Select text input content on trapFocus (Shopify#2106)

696c554

* Select text input content on trapFocus * PR fix

Select text input content on trapFocus #2106

Select text input content on trapFocus #2106

Uh oh!

Conversation

FCalabria commented Nov 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary:

Why are these changes introduced?

What approach did you take?

Visual impact on existing themes

Demo links

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sofiamatulis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ludoboludo left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

FCalabria commented Nov 7, 2022 •

edited

Loading