Skip to content

fix: autofocus on text input when open ended question is rendered #2024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from

Conversation

lucasheriques
Copy link
Contributor

@lucasheriques lucasheriques commented Jun 16, 2025

Changes

Moves the autofocus on for open text directly into the question component. It simplifies the logic, plus now it autofocus for any question, not just the first one (i.e. last question is an open ended)

Copy link

vercel bot commented Jun 16, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
posthog-js ✅ Ready (Inspect) Visit Preview Jun 16, 2025 7:14pm

Copy link

github-actions bot commented Jun 16, 2025

Copy link

github-actions bot commented Jun 16, 2025

Size Change: -438 B (-0.01%)

Total Size: 3.55 MB

Filename Size Change
packages/browser/dist/all-external-dependencies.js 219 kB -45 B (-0.02%)
packages/browser/dist/array.full.es5.js 305 kB -39 B (-0.01%)
packages/browser/dist/array.full.js 370 kB -45 B (-0.01%)
packages/browser/dist/array.full.no-external.js 387 kB -45 B (-0.01%)
packages/browser/dist/module.full.js 370 kB -45 B (-0.01%)
packages/browser/dist/module.full.no-external.js 387 kB -45 B (-0.01%)
packages/browser/dist/surveys-preview.js 70.1 kB -127 B (-0.18%)
packages/browser/dist/surveys.js 78.1 kB -47 B (-0.06%)
ℹ️ View Unchanged
Filename Size
packages/browser/dist/array.js 170 kB
packages/browser/dist/array.no-external.js 185 kB
packages/browser/dist/customizations.full.js 11 kB
packages/browser/dist/dead-clicks-autocapture.js 12.6 kB
packages/browser/dist/exception-autocapture.js 9.55 kB
packages/browser/dist/external-scripts-loader.js 2.57 kB
packages/browser/dist/main.js 171 kB
packages/browser/dist/module.js 171 kB
packages/browser/dist/module.no-external.js 186 kB
packages/browser/dist/posthog-recorder.js 207 kB
packages/browser/dist/recorder-v2.js 113 kB
packages/browser/dist/recorder.js 113 kB
packages/browser/dist/tracing-headers.js 1.58 kB
packages/browser/dist/web-vitals.js 10.4 kB

compressed-size-action

@lucasheriques lucasheriques force-pushed the fix/survey-openquestion-autofocus branch from b898f0e to bea4bc8 Compare June 16, 2025 19:11
@lucasheriques lucasheriques marked this pull request as ready for review June 16, 2025 19:17
@lucasheriques lucasheriques requested a review from a team as a code owner June 16, 2025 19:17
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

Improves survey UX by implementing consistent autofocus behavior for open text questions. This change relocates autofocus logic from the popup visibility hook to individual question components.

  • Moves autofocus from usePopupVisibility hook to OpenTextQuestion component, enabling focus on any open text question, not just the first one
  • Implements autofocus using useRef and useEffect with a 100ms delay to ensure reliable focus
  • Removes duplicative focus management code, simplifying the component architecture
  • Fixes minor CSS class name formatting by removing leading space in multiple choice questions

2 files reviewed, 1 comment
Edit PR Review Bot Settings | Greptile

Comment on lines +92 to +96
useEffect(() => {
setTimeout(() => {
inputRef.current?.focus()
}, 100)
}, [])
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider adding cleanup to clear timeout if component unmounts before timeout fires

Suggested change
useEffect(() => {
setTimeout(() => {
inputRef.current?.focus()
}, 100)
}, [])
useEffect(() => {
const timer = setTimeout(() => {
inputRef.current?.focus()
}, 100)
return () => clearTimeout(timer)
}, [])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant