Skip to content
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

Progress bar in questions mode conflicting with browser's auto-fill #9348

Open
Delic1ous opened this issue Jan 23, 2025 · 1 comment
Open
Assignees
Labels
need more info user issue An issue or bug reported by users

Comments

@Delic1ous
Copy link

Delic1ous commented Jan 23, 2025

Describe the bug
If showProgressBar is enabled with progressBarType: "requiredQuestions" | "questions", auto-fill tries to fill inputs, but only last field of them is filled and others are almost instantly cleared

Steps to reproduce

  1. Create survey form with default progress bar which will trigger browser's autofill rules
  2. Select auto-fill
  3. See first fields not being filled

Expected behavior
Auto-fill works for all fields

Screenshots

Image

Please complete the following information:

  • Browser: chrome and safari
  • Browser version: [e.g. 22]
  • JS framework/library: React
  • SurveyJS version: v1.12.8
  • Device: any

Additional context
Disabling progress bar immediately fixes the issue

P.S. surveyjs is top-notch, thanks for creating this masterpiece!

@JaneSjs JaneSjs self-assigned this Jan 23, 2025
@JaneSjs
Copy link
Contributor

JaneSjs commented Jan 23, 2025

Hello,
I tested the following survey with v1.12.20: View Published Survey. However, I cannot seem to reproduce the issue. Would you please test this survey (a published one or the following JSON) on your end? Additionally, share a screencast if possible.

{
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "text",
          "name": "question1",
          "title": "First Name",
          "isRequired": true,
          "autocomplete": "given-name"
        },
        {
          "type": "text",
          "name": "question2",
          "title": "Last Name",
          "isRequired": true,
          "autocomplete": "family-name"
        },
        {
          "type": "text",
          "name": "question3",
          "title": "Phone Number",
          "isRequired": true,
          "autocomplete": "tel"
        },
        {
          "type": "text",
          "name": "question4",
          "title": "Email",
          "isRequired": true,
          "inputType": "email",
          "autocomplete": "email"
        },
        {
          "type": "text",
          "name": "question5",
          "title": "Date of Birth",
          "isRequired": true,
          "inputType": "date",
          "autocomplete": "bday"
        }
      ]
    }
  ],
  "showProgressBar": "aboveheader",
  "progressBarType": "requiredQuestions"
}

Thank you

@JaneSjs JaneSjs added need more info user issue An issue or bug reported by users labels Jan 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
need more info user issue An issue or bug reported by users
Projects
None yet
Development

No branches or pull requests

2 participants