WAIT: Auto focus not work on popup and offcanvas

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Hello,

If we have an element like a form or search-filter in a popup or offcanvas, on mobile after it is opened, Auto focus does not happen and the keyboard does not activate. This was the default behavior before, but now focus does not happen at all. Even if Disable auto focus is disabled. Am I doing something wrong?

Best regards

2

Hey @jolia,

what is your popup settings? I can’t replicate this issue. In my case, it focuses on the first form input element.

Basically, I don’t have any special settings set.

CleanShot 2026-05-07 at 10.15.12@2x
CleanShot 2026-05-07 at 10.15.12@2x968×1290 76 KB

And question for you: Is it working on desktop, and is its only issue in the mobile devices?

Matej

3

Hi @Matej,

It works fine on Android browsers, but it doesn’t work as well on iPhone as it does on Safari.

4

Can you share a link, please? I was testing on iPhone.

Matej

5

Hello @Matej,

{"content":[{"id":"mqnznh","name":"section","parent":0,"children":["fpnuxh"],"settings":{}},{"id":"fpnuxh","name":"container","parent":"mqnznh","children":["bqhmlz"],"settings":{}},{"id":"bqhmlz","name":"button","parent":"fpnuxh","children":[],"settings":{"text":"Offcanvas","style":"primary","_background":{"color":{"light":"#424242","raw":"var(--bricks-color-grey-800)","id":"1da04c"}},"_typography":{"color":{"raw":"hsl(0, 0%, 100%)"}},"_interactions":[{"id":"legcnm","trigger":"click","action":"toggleOffCanvas","offCanvasSelector":"#brxe-ucztpj"}]}},{"id":"ucztpj","name":"offcanvas","parent":0,"children":["bmoiyi","cbpmld"],"settings":{"direction":"bottom","height":"50%"}},{"id":"bmoiyi","name":"block","parent":"ucztpj","children":["qutady","okvkgr"],"settings":{"_hidden":{"_cssClasses":"brx-offcanvas-inner"},"_padding":{"top":"20","right":"20","bottom":"20","left":"20"},"_rowGap":"20"},"label":"Content","cloneable":false,"deletable":false},{"id":"qutady","name":"text-basic","parent":"bmoiyi","children":[],"settings":{"text":"Close offcanvas","_alignSelf":"center","tag":"span","_interactions":[{"id":"eesotw","trigger":"click","action":"toggleOffCanvas","offCanvasSelector":"#brxe-ucztpj"}]}},{"id":"cbpmld","name":"block","parent":"ucztpj","children":[],"settings":{"_hidden":{"_cssClasses":"brx-offcanvas-backdrop"}},"label":"Backdrop"},{"id":"okvkgr","name":"form","parent":"bmoiyi","children":[],"settings":{"fields":[{"type":"text","label":"Name","placeholder":"Your Name","id":"6305f5"},{"type":"textarea","label":"Message","placeholder":"Your Message","required":true,"id":"4f0335"}],"submitButtonStyle":"primary","actions":["email"],"successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"Try Bricks - t8f1f855","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you."},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://try.bricksbuilder.io/t8f1f855","version":"2.3.5"}
6

Hey @jolia,

can you try this one (you need to change target CSS Id in the interaction most likely). Now the form element is actually the first element, and in my case, it focuses correctly.

{"content":[{"id":"gqnvcu","name":"section","parent":0,"children":["xholkg"],"settings":{}},{"id":"xholkg","name":"container","parent":"gqnvcu","children":["sbhwie"],"settings":{}},{"id":"sbhwie","name":"button","parent":"xholkg","children":[],"settings":{"text":"Offcanvas","style":"primary","_interactions":[{"id":"legcnm","trigger":"click","action":"toggleOffCanvas","offCanvasSelector":"#brxe-lumbcp"}]}},{"id":"lumbcp","name":"offcanvas","parent":0,"children":["piyrud","ycuhuy"],"settings":{"direction":"bottom","height":"50%"}},{"id":"piyrud","name":"block","parent":"lumbcp","children":["oozmzz"],"settings":{"_hidden":{"_cssClasses":"brx-offcanvas-inner"},"_padding":{"top":"20","right":"20","bottom":"20","left":"20"},"_rowGap":"20"},"label":"Content","cloneable":false,"deletable":false},{"id":"ycuhuy","name":"block","parent":"lumbcp","children":[],"settings":{"_hidden":{"_cssClasses":"brx-offcanvas-backdrop"}},"label":"Backdrop"},{"id":"oozmzz","name":"form","parent":"piyrud","children":[],"settings":{"fields":[{"type":"text","label":"Name","placeholder":"Your Name","id":"6305f5"},{"type":"textarea","label":"Message","placeholder":"Your Message","required":true,"id":"4f0335"}],"submitButtonStyle":"primary","actions":["email"],"successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"Try Bricks - t8f1f855","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you."},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://1bricks.local","version":"2.3.5"}

Where in the try.bricksbuilder.io that you pasted can I see the example?

Matej