https://user-images.githubusercontent.com/29385489/144872177-f2f2b809-2568-432e-b10a-1859999a89c7.png

For now, it has 16px in designer for current drag-drop implementation with the absolute position ghost line (it will change after animation implementation).

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=8085%3A48263

Are you requesting a feature, reporting a bug or asking a question?

Question/bug

What is the current behavior?

Violation reports based on IBM Equal Access Accessibility Checker (Chrome extension) https://chrome.google.com/webstore/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp)

<fieldset> element <legend> is empty An element with ARIA role 'checkbox' does not have the required ARIA attribute(s): 'aria-checked' The ARIA role 'checkbox' is not valid for the element <legend>

And that's because of the <legend> added like this: <legend role="checkbox" aria-label="What car are you driving?"></legend>

I can see the reasoning that you've added aria-label instead of providing a text (in other way, you'd need to visually hide it) But why <legend> even has role="checkbox"?

It's also complaining about

Accessible name does not match or contain the visible label text

I guess it doesn't like the aria-label here, which doesn't match "Ford" <input value="Ford" aria-invalid="false" aria-label="What car are you driving?" aria-required="true" id="sq_100i_0" name="car" type="checkbox" class="sv-visuallyhidden sv-item__control">

What is the expected behavior?

No violations reported

How would you reproduce the current behavior (if this is a bug)?

Run IBM Equal Access Accessibility Checker scan on a page with checkboxes

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://surveyjs.io/Examples/Library?id=questiontype-checkbox&platform=Reactjs&theme=modern

Specify your

• browser: Chrome
• browser version: 96.0.4664.93
• surveyjs platform (angular or react or jquery or knockout or vue): all, I think (but React in my case)
• surveyjs version: 1.9.2

https://surveyjs.answerdesk.io/ticket/details/t8422/panel-arrows-are-not-displayed-properly

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

When in the page a question is a paneldynamic, and the properties keyName keyDuplicationError are used, when using the function page.hasErrors(false) (so errors shouldn't be visibles), the errors do appear and stack each time hasErrors is ran.

I guess that when calling hasErrors with false, previous errors are not cleaned and still appears while they shouldn't.

As i run hasErrors on valueChange, my current workaround is to clean errors of dynamic panels before checking errors add this event handler :

onValueChanged.add((sender) => {
    sender.currentPage.getAllQuestions(true).forEach((question: Question) => {
      if (question.getType()?.toLowerCase() === "paneldynamic") {
        question.clearErrors();
      }
    });
  });

What is the expected behavior?

The errors shouldn't show and shouldn't stack

How would you reproduce the current behavior (if this is a bug)?

• create a survey with a paneldynamic
• use the properties keyName keyDuplicationError
• duplicate the field
• call page.hasErrors(false) (multiple times, each time stacking the error)

A reproduction environment is given next section on codesandbox.

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://codesandbox.io/s/sad-waterfall-50tjm?file=/index.html To reproduce add an element then click (multiple times) on the button "check errors"

Specify your

• browser: chrome & firefox
• surveyjs platform (angular or react or jquery or knockout or vue): jquery
• surveyjs version: 1.8.71

We need this functionality for Creator V2

The bug was created on SurveyJS support forum.

See the https://surveyjs.answerdesk.io/ticket/details/t8573/surveyjs-creator-react-v2-throws-warnings-when-used-in-a-react-app thread for more details

based on the issues:

https://surveyjs.answerdesk.io/ticket/details/T8562 https://surveyjs.answerdesk.io/ticket/details/T8566

Scrollbar background should be the same as control background

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent; 
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 32px;
  background-color: #d6d6d6;
}

::-webkit-scrollbar-thumb:hover {
  border: 2px solid rgba(0, 0, 0, 0);
  background-color: #909090;
}

Hello there with this link: https://surveyjs.io/Examples/Survey-Creator#content-result or https://surveyjs.io/Survey/Builder/

Used the following JSON:

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "text",
     "name": "question4"
    },
    {
     "type": "paneldynamic",
     "name": "question1",
     "templateElements": [
      {
       "type": "text",
       "name": "question3"
      },
      {
       "type": "text",
       "name": "question2",
       "title": "How are you {panel.question3}? How are you {question4}?"
      }
     ]
    }
   ]
  }
 ]
}

You'll notice in the survey editor the -> becomes "" but yet is still shown as "".

This makes it a bit tricky when filling out a survey using the designer, as it appears How are you ? shows up instead of How are you ?

When you run the test the survey it's as expected, both are blank obviously:

Are you requesting a feature, reporting a bug or ask a question?

Bug

What is the current behavior?

In v2 the choices editor no longer has columns header. While one could argue that for those 2 columns it is logical that it's value | label, this quickly breaks down when using a custom itemvalue type:

What is the expected behavior?

I'd expect to see column headers for clarity.

based on the https://surveyjs.answerdesk.io/internal/ticket/details/T8502

What is the current behavior?

When the "Panels state" dropdown is changed to "collapsed", it doesn't apply - panels appear expanded. Here's a screencapture.

What is the expected behavior?

Panels are collapsed in the preview.

How would you reproduce the current behavior (if this is a bug)?

1. Open the Survey Creator.
2. Add panel dynamic to the canvas.
3. Add a couple of question to the panel.
4. Set Panels state to "collapsed".
5. Switch to the Preview tab.

I'm using the React version.

convertToCamelCase function in editorLocalization doesn't work correctly. It works correctly for strings like "onTop" => "On top", but it doesnt' work for "USD". It convert it to "U S D" or "u s d" based on options. It should be "USD".

Creator doesn't allow to view/edit logic for template elements of panel dynamic question. It should be implemented similar to matrices columns.

Currently defaultValueExpression works on loading survey model. It works perfectly for the following scenario: defaultValueExpression: "today()". In this case the question value will be the current date on loading survey. In some cases, it is useful to have default value that assign from another question and it should be assign during survey running. For example: defaultValueExpression: "{home_address}" for "deliver_address". The value should be assign from "home_address" question on any "home_address" change, until a user do not change the question value for "deliver_address" directly. This functinality work in matrix dynamic/dropdown as defaultValueExpression: "{row.home_address}" and panel dynamic as defaultValueExpression: "{panel.home_address}".

Currently, we could not reproduce the error. The error happens in this function. We need to reproduce the issue to write a unit test.

  private hasErrorInRows(fireCallback: boolean, rec: any): boolean {
    if (!this.generatedVisibleRows) {
      const rows = this.visibleRows;
    }
    var res = false;
    if (!rec) rec = {};
    
    rec.isSingleDetailPanel = this.detailPanelMode === "underRowSingle";
// Here is the error check on existing this.generatedVisibleRows is needed. 
// However the first line should generate rows.
    for (var i = 0; i < this.generatedVisibleRows.length; i++) {
      res =
        this.generatedVisibleRows[i].hasErrors(fireCallback, rec, () => {
          this.raiseOnCompletedAsyncValidators();
        }) || res;
    }
    return res;
  }

See Design buglist: Designer->Questions->Ranking

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=7994%3A51952 https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=7994%3A51952

The min/max property editors doesn't chagne their input type on changing text question input type. Here is "max" property definition:

    {
      name: "max",
      dependsOn: "inputType",
      nextToProperty: "*min",
      visibleIf: function(obj: any) {
        return !!obj && obj.isMinMaxType;
      },
      onPropertyEditorUpdate: function(obj: any, propertyEditor: any) {
        propertyEditor.inputType = obj.inputType;
      },
    }

"onPropertyEditorUpdate" function should be called initionally and then on changing "inputType" property.

Setting panel visibleIf/enableIf properties in Logic tab does nothing.

Are you requesting a feature, reporting a bug or ask a question?

Bug

What is the current behavior?

When removing some properties from the serializer the V2 creator won't start because the construct fails.

Specifically this part of the code:

set allowEditSurveyTitle(val: boolean) {
    ["title", "description", "logo", "showTitle", "logoWidth", "logoHeight", "logoFit"].forEach(propertyName => Serializer.findProperty("survey", propertyName).visible = val);
    this.setPropertyValue("allowEditSurveyTitle", val);
    this.designerPropertyGrid && this.designerPropertyGrid.refresh();
  }

This code makes it so that if someone removes any of those properties via Survey.Serializer.removeProperty("survey", property)); the creator won't work at all.

A simple solution would be to check whether the property exists before calling .visible = val on it.

For Creator V2 property grid - implement placeholder for an empty collection

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=2100%3A7986

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

The ranking elements in a ranking question may contain HTML, for example images. When this is the case, dragging an image sometimes starts the browser's standard behavior of dragging the image content.

What is the expected behavior?

Dragging anywhere on the ranking content should activate the standard ranking behavior

How would you reproduce the current behavior (if this is a bug)?

Put images in the ranking question

Solution

Add CSS pointer-events: none to ranking label children.

.sv-ranking-item__content > * {
    pointer-events: none;
}

Workaround

Currently there is a workaround available by manually adding the CSS inline to whatever content is in the ranking choice, alternatively it could be set in a custom theme or CSS sheet. This therefore has no priority for me, and you should decide whether this (images in rankign) is even supported before you implement this fix ;-)

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

When you type in the other comment field of a checkbox, there is an error happening in the console:

Uncaught TypeError: e.target is undefined                                   survey.jquery.min.js:11:374205

What is the expected behavior?

No errors should happen when you type a comment.

How would you reproduce the current behavior (if this is a bug)?

Add a checkbox with hasOther=true and add "textUpdateMode": "onTyping" setting to a survey.

Provide the test code and the tested page URL (if applicable)

https://plnkr.co/edit/py4ZMSkvbXuBJbTz

Specify your

• browser: Firefox
• browser version: latest
• surveyjs platform (angular or react or jquery or knockout or vue): jquery
• surveyjs version: 1.9.1 and 1.9.3 for sure

Was not implemented.

The sample:

var survey = new SurveyModel({
    elements: [
      {
        type: "ranking",
        name: "q",
        choices: ["a", "b", "c"],
      },
    ],
  });
survey.mode = "display";

https://surveyjs.answerdesk.io/ticket/details/t8422/panel-arrows-are-not-displayed-properly

The following code doesn't work correctly:

  Survey.ComponentCollection.Instance.add({
    name: "customerinfo",
    elementsJSON: [
      { type: "text", name: "firstName" },
      { type: "text", name: "lastName" },
    ],
  });
  var survey = new SurveyModel();
  survey.setDesignMode(true);
  survey.fromJSON({
    elements: [{ type: "customerinfo", name: "q1", isRequired: true, defaultValue: { firstName: "Jon", lastName: "Snow" } }],
  });

The default value is not set into inner questions in design mode (Creator). However, it works perfectly in run-time.

referenced to surveyjs/survey-creator#2311

See the https://surveyjs.answerdesk.io/ticket/details/t8430/the-complete-button-of-the-survey-with-rating-question-type-does-not-work-in-ie-11 thread for more details

• check and fix style for dragged element (fig. 1)
• reset selection from question after drag start
• insert indicator (orange line) should move the bottom question (see #2411)
• add pressed state for toolbox items when adding a question https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=10177%3A82188
• while dragging from the toolbox, page and the dragging element should have an orange border https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=2050%3A8666

Current design:

Needed design: https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=9927%3A76581

And show Survey settings

• https://github.com/surveyjs/survey-library/issues/3698
• https://github.com/surveyjs/survey-creator/issues/2287
• https://github.com/surveyjs/survey-library/issues/3699
• https://github.com/surveyjs/survey-creator/issues/2290
• https://github.com/surveyjs/survey-creator/issues/2296
• https://github.com/surveyjs/survey-creator/issues/2297
• https://github.com/surveyjs/survey-creator/issues/2298

If to set "Other" then set "Has comment", it will be strange result (Fig. 1)

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=9312%3A175584

Refers to #2370

See Design buglist: Designer->Questions->Rating

Hide and then open property grid to reproduce this behavior

add "clickOrDrag" functionality to "start drag zone":

• #2457
• #2458

• Wrong property grid bottom color
• Wrong group header hover and expanded states
• Wrong input/comment focus state
• Fix rounded corners in dropdown
• Fix multiline text spacing and font
• Implement checkboxes grouping
• Check tab navigation in Safari: checkboxes - created issue https://github.com/surveyjs/survey-creator/issues/2432
• wrong checkbox icon

We missed creator.inplaceEditForValues property support in V2.

Are you requesting a feature, reporting a bug or ask a question?

We're trying to incorporate the surveyjs survey creator into our project (we, Caribou Inc, paid a license .. not sure if that warrants escalated support or not) however the project doesn't compile.

What is the current behavior?

Video: https://share.vidyard.com/watch/ASJXxiZbPVfUaVEibBZJfp

Repro: https://github.com/supermacro/survey-js-react-issue-repro

As you can see in the video, there are illegal assignments, name conflicts, invalid module structure (using UMD) and missing modules.

What is the expected behavior?

There shouldn't be any compiler errors.

How would you reproduce the current behavior (if this is a bug)?

https://github.com/supermacro/survey-js-react-issue-repro

https://plnkr.co/edit/gt9UWXqvw5hPMSQU

https://plnkr.co/edit/gt9UWXqvw5hPMSQU

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/?node-id=9368%3A65596

https://surveyjs.answerdesk.io/ticket/details/t8440/most-of-the-functions-in-survey-creator-v1-is-not-working-in-v2

• blinking after #2288
• react: empty css styles doesn't work (simple panel works as expected)

In knockout paneldynamic's empty state markup doesn't contain the "Add Question" button:

https://surveyjstest.azurewebsites.net/create-survey-v2

react:

Code is not compiled with new typings. There are several erros.

See the https://surveyjs.answerdesk.io/ticket/details/t8443/changing-a-component-does-not-work thread for more details

it is decorative element and should be treated not like questions/panels

Are you requesting a feature, reporting a bug or asking a question?

bug

What is the current behavior?

it seems that html question does not apply text processing using other question ref before displaying

https://plnkr.co/edit/QZdMoItJiyln4blN

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

'Other' textarea is always visible for radiogroup, no matter if radio button associated with it is selected or not.

What is the expected behavior?

'Other' textarea should be only presented, when 'Other' radio option is selected.

How would you reproduce the current behavior (if this is a bug)?

Just enable 'other' for radiogroup (hasOther: true)

Provide the test code and the tested page URL (if applicable)

Currently visible on examples page as well. Tested page URL: https://surveyjs.io/Examples/Library?id=questiontype-radiogroup&platform=Reactjs&theme=modern

Test code

{
    type: "radiogroup",
    name: "gender",
    isRequired: true,
    hasOther: true
}

Specify your

• browser: Chrome
• browser version: 96.0.4664.93
• surveyjs platform (angular or react or jquery or knockout or vue): React
• surveyjs version: 1.9.2

For Matrix questions (choices/dynamic), there are occasions where the total calculations can receive a string value causing a javascript error.

Ran into this issue - see plunker: https://plnkr.co/edit/FVf5RrsbUJVeaE0J

Matrix (choices) - 3 Rows | CellType: 'Single Input' -> Column | Edit => "ColumnC" Properties: Total: 'sum', InputMask: 'Currency'

You see errors in console when entering values in ColumnC.

ColumnA - Single Input, InputType: 'Number', InputMask: 'None' ColumnB - Single Input, InputType: 'Number', InputMask: 'Currency' ColumnC - Default (CellType: 'text'), InputType not set, InputMask: 'Currency'

ColumnB: Allows the calculations, but the InputType is interferring with InputMask - Don't see placeholder text - Currency value display: 45.00 -> 45, 12.50 -> 12.5

Reason for ColumnC:
- InputMask works with text to show placeholder value $0.00 - Retains the currency value: $12.20 -> $12.20

Proposed update: https://github.com/mikekidder/survey-library/commit/7c9344ccda061b0219ffc98e5cadf976a218c227 Happy to submit a PR

It also fixes an important hydration issue we have as well.

Our form data results are stored in database as XML.
Due to the conversion back to JSON, all values are strings. String values passed in into the Matrix questions has same issues above.

Are you requesting a feature, reporting a bug or asking a question?

Feature

What is the current behavior?

Currently builtin properties support loading localized default properties from localizations. This is realized by these lines in survey.ts:

this.createLocalizableString("pageNextText", this, false, true);

The 4th argument tells the localizable string that it should try to load data from the localization if not specified in survey config.

When creating custom properties you can set isLocalizable to true, this enables localization support. It would be great if these custom properties also support loading defaults from localizations.

Concrete example: we're adding a property closeWindowText to our surveys. We want this to be customizable just like all other button texts, but we also want to provide localized defaults just like builtin button texts.

Workarounds

Since createLocalizableStrings is protected we can't (or shouldn't) call this from outside, which would be a dirty hack anyway.

One other option is to manually set the localizationName public property on the LocalizableString object.

survey.getLocalizableString("closeWindowText").localizationName = 'closeWindowText';

Expected behavior

I think it makes sense to add support for loading defaults from localization by default for custom properties. Since they won't be set in most cases unless the user adds them explicitly it won't impact users not using it.

here the example https://plnkr.co/edit/pmxEI77BYxJE3FWx

• expand button doesn't work if survey popup wasn't shown
• Window compoent is exported but "survey-window" element is used
• expand button click area is too small

See the https://surveyjs.answerdesk.io/ticket/details/t8386/empty-space-rendering-after-question-upgraded-survey-from-1-8-18-to-1-9-0 thread for more details

Are you requesting a feature, reporting a bug or asking a question?

bug

What is the current behavior?

the checkbox triggers a question which has a default value and it's not been checked

What is the expected behavior?

when i check an option of the checkbox, the next question would appear with the default value checked

Provide the test code and the tested page URL (if applicable)

https://plnkr.co/edit/8D1x9WKWDwRVXBm1?preview

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

See the https://surveyjs.answerdesk.io/ticket/details/t8402/survey-progress-bar-bug thread for more details

The following code: survey.locTitle.setLocaleText("de", "de Title"); will not fire locTitle onStrChanged callback if the current locale is not "de". As result survey doesn't get notification that localization string has been changed. We used this survey notification in Survey Creator V2. Here is the related issue in Creator V2. Additionally a small bug in HtmlConditionItem has been fixed. It returned null on getSurvey() and could not trigger survey notification on it's chage that leads to a similar error.

• #2385
• dashed frame of new item
• image in drag and drop??
• #2220
• drag-drop icon
• row margins

Also see Mike's buglist, section Designer->Questions->ImagePicker!!!

Current:

Needed:

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=9296%3A46832

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=8057%3A51247

Allow to override Page Component in the Creator. The following code override the Page footer:

//Extend the standard component
class CreatorSurveyPageComponent2 extends SurveyCreator.CreatorSurveyPageComponent {
  //Override the page footer
  renderFooter() {
    return (<div>Some Text {super.renderFooter()}</div>);
  }
}
//Register your own component instead of CreatorSurveyPageComponent 
SurveyReact.ReactElementFactory.Instance.registerElement("svc-page", (props) => {
  return React.createElement(CreatorSurveyPageComponent2, props);
});

After "Test Survey Again" action becomes visible in "Preview" tab, it keeps beeing visible in all creator tabs. It should disappared on leaving "Preview" tab.

it should be next to hasComment one

related to https://github.com/surveyjs/survey-library/issues/3774

See the https://surveyjs.answerdesk.io/ticket/details/t8381/create-custom-quetion-based-on-the-existing thread for more details

Disable input, but allow to enter date using popup. question.disableInput = true;

Are you requesting a feature, reporting a bug or asking a question?

Question

What is the current behavior?

I've created a custom question (or specifically a custom UX for matrix questions). Now I want to override the supportGoNextPageAutomatic behavior. Is there any way to do this from the custom question type API?

I could do it by just setting the property on the question in the afterRender() callback, but not sure if that's the best approach.

additional materials about the problem:

https://bugs.webkit.org/show_bug.cgi?id=184250 - webkit bug (or feature) https://github.com/Shopify/draggable/blob/9b5ff16004d80995f1563a2ebd7e419d1cb861e8/src/Draggable/Sensors/TouchSensor/TouchSensor.js#L17 - example of realization https://gist.github.com/morewry/538efb737ed9c4e432e4 - emulate touch events

https://stackoverflow.com/questions/56653453/why-touchmove-event-is-not-fired-after-dom-changes !! https://stackoverflow.com/questions/46328747/touchmove-events-stop-after-replacing-innerhtml !!

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

When using React, in a nested dynamic panel, adding a panelCount of more than 0 causes the styling to be broken on templateElements in the nested panel. It appears some classes are not added correctly.

What is the expected behavior?

Styling is the same when you do not add panelCount in a nested dynamic panel.

How would you reproduce the current behavior (if this is a bug)?

Simply use a nested dynamic panel (a dynamic panel in a dynamic panel, with an element inside it) and then add a panelCount of 1 or more to the inner panel.

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://plnkr.co/edit/CYBAnZf9xKE3T8dt?preview

Test code (slightly simpler than the plunker, removing superfluous questions)

Survey
    .StylesManager
    .applyTheme("modern");

var json = {
 "pages": [
  {
   "name": "Test page",
   "elements": [
    {
     "type": "paneldynamic",
     "name": "panel1",
     "title": "Panel 1",
     "templateElements": [
        {
         "type": "text",
         "name": "testText1",
         "title": "Text 1"
        },
      {
       "type": "paneldynamic",
       "name": "innerPanel1",
       "title": "Inner Panel 1",
       "templateElements": [
        {
         "type": "text",
         "name": "testText2",
         "title": "Text 2"
        }
       ],
       "panelCount": 1,
       "panelAddText": "Add Inner Panel",
       "panelRemoveText": "X"
      }
     ],
     "panelCount": 1,
     "panelAddText": "Add Outer Panel",
     "panelRemoveText": "X"
    }
   ]
  }
 ],
 "showQuestionNumbers": "off",
 "completeText": "Submit"
};

window.survey = new Survey.Model(json);

survey
    .onComplete
    .add(function (sender) {
        document
            .querySelector('#surveyResult')
            .textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
    });

ReactDOM.render(<Survey.Survey model={survey}/>, document.getElementById("surveyElement"));

Specify your

• browser: Chrome
• browser version: 96
• surveyjs platform (angular or react or jquery or knockout or vue): react
• surveyjs version: 1.9.1

Unlike checkbox question, ranking question is about choices order. We should not ignore arrays order comparing two arrays.

We should compare arrays ignoring orders for image picker question in multi select mode

We use model for all other our frameworks, but survey as props for vue. To be consistent, both variants should be valid: <survey :survey="survey" /> and <survey :model="survey" />

If element properties are edited in modal window and description property is added as a column into pages section, then it doesn't work. Here is the related issue on SurveyJS Support Forum .

Need to fix:

• Tab buttons order
• Tab buttons paddings
• Separator height
• Icons must be square
• Check pressed-states
• Underline hover tab
• Rename tabs
• Active item colorize
• Icons padding
• Disable preview tab and clear survey button when survey is empty
• Add tests
• Current tab selection style

See the design - https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SurveyJS?node-id=8085%3A48258

Buttons are used in value editor (linkvalue question)

• Implement Panel "Add Question" button
• Fix CSS

• Title too far from editor
• Icons are of wrong size
• The "Clear" button should be hidden if nothing is entered
• Buttons should have states

• fix icons
• check order by survey layout
• fix aligment in comment by title
• remove tooltip https://github.com/orgs/surveyjs/projects/4#card-74500410
• fix focused langauge items

• use name for title placeholder
• translation placeholder should be localized
• use localization constants for placeholders

For detailed information see the ticket in the support center

If there is a nested dynamic panel (dynamic panel inside another dynamic panel), then to access values in expression from the parent panel can by using "parentpanel" prefix. Here is the JSON example. "child_question1" becomes visible when an user set any value into checkbox_root question and child_question2 shows choices that selected in checkbox_root.

{
      elements: [
        {
          type: "paneldynamic",
          name: "rootPanel",
          panelCount: 1,
          templateElements: [
            {
              type: "checkbox",
              name: "checkbox_root",
              choices: ["item1", "item2", "item3"],
            },
            {
              type: "paneldynamic",
              name: "childPanel",
              minPanelCount: 1,
              templateElements: [
                {
                  type: "text",
                  name: "child_question1",
                 visibleIf: "{parentpanel.checkbox_root} notempty"
                },
                {
                  type: "checkbox",
                  name: "child_question2",
                  hideIfChoicesEmpty: true,
                  choicesVisibleIf: "{parentpanel.checkbox_root} contains {item}",
                  choices: ["item1", "item2", "item3"],
                }
              ]
            }
          ]
        }
      ]
    }

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

Window scrolls to survey JS on load, first question is auto focused by default.

What is the expected behavior?

The page should not auto scroll to the survey. This causes weird behavior, scrolling my page to the bottom. According to https://github.com/surveyjs/survey-library/commit/2410bab8db5da0218f32355130367d924026f403 this was supposed to be fixed.

I have tried using focusFirstQuestionAutomatic property but that only ensures the question isn't focused upon click "next".

It looks like the problem is with the API, using the API and setting survey.focusFirstQuestionAutomatic = false; in JavaScript will produce the error. However if the option is set in the surveyjson focusFirstQuestionAutomatic : false then the page does not scroll or focus.

How would you reproduce the current behavior (if this is a bug)?

Easily tested, add content before the survey div. When the div loads, page will scroll to the survey and focus on first question.

Adding focusFirstQuestionAutomatic into the serializable ensures the first page /first questions is not focused. Adding it to the API in javascript will produce an error.

Specify your

• browser: Chrome
• browser version: 92.0
• surveyjs platform (angular or react or jquery or knockout or vue): jquery
• surveyjs version:

for now customers report about a11Y problems with the w3c validator and with the FastPass in Accessibility Insights for Web

json (simple radiogroup):

var json = {
    questions: [
      {
        "type": "radiogroup",
        "name": "car",
        "title": "What car are you driving?",
        "isRequired": true,
        "hasNone": true,
        "colCount": 4,
        "choices": [
          "Ford",
          "Vauxhall",
          "Volkswagen",
          "Nissan",
          "Audi",
          "Mercedes-Benz",
          "BMW",
          "Peugeot",
          "Toyota",
          "Citroen"
        ]
      }
    ]
  };

need to investigate and fix the problems.

probably some problems appeared after the : https://github.com/surveyjs/survey-library/commit/3593b4fc83e0618d3e8d8e844071925c14e6d9d0 (https://www.w3.org/TR/using-aria/#fourth)

• font weight
• hide title
• not to change cursor
• width by content
• fix icon color of dynamic panel
• fix dots item hover
• fix popup item style in popup
• fix padding & margins between items
• #2293

• revert skip testcafe test

We should use displayValue for questions in read-only mode instead of value.

I am using surveyjs (1.8.78) for Angular, and otherPlaceholder seems to be ignored:

"name": "page1",
   "elements": [
    {   
     "type": "radiogroup",
     "name": "primary_reason",
     "title": {
      "da": "Vælg din primære årsag",
      "en": "Choose your primary reason?"
     },  
     "isRequired": true,
     "hasOther": true,
     "otherPlaceholder": {
      "da":"Skriv din begrundelse her...",
      "en":"Write your reason here..."
     }, 
     [...]
   }
[...]

Originally posted by @marie-dk in https://github.com/surveyjs/survey-library/issues/1703#issuecomment-976753413

There is incorrect template for renderign footer cells in matrices. As result we have element inside another .

If a variable used as a parameter in choices from web url: "https://surveyjs.io/api/CountriesExample?region/?locale=", SurveyJS doesn't reload locale on changing it.

Instead of the following code:

//in constructor
   var locRemoveRowText = this.createLocalizableString("removeRowText", this);
    locRemoveRowText.onGetTextCallback = (text: string): string => {
      return !!text ? text : surveyLocalization.getString("removeRow");
    };

and on property getter:

  public get confirmDeleteText() {
    return this.getLocalizableStringText(
      "confirmDeleteText",
      surveyLocalization.getString("confirmDelete")
    );
  }

Use the following code:

//in constructor
this.createLocalizableString("confirmDeleteText", this, false, "confirmDelete");

and on property getter

public get confirmDeleteText() {
  return this.getLocalizableStringText("confirmDeleteText");
}

The following code:

survey.setValue("question1", "value");

Doesn't update question isAnswered property and as result visually quesiton is not rendered as answered.

There is no way to find out to which object error is belong in survey.onErrorCustomText event. As result, there is no way to include question title into error text. Please refer to this issue for more information. Here is the example

  survey.onErrorCustomText.add(function (sender, options) {
    if (options.name == "required") {
      options.text = "Value is missed in question: '" + options.obj.title + "'.";
    }
  });

Are you requesting a feature, reporting a bug or asking a question? bug

What is the current behavior? if a question has a option with visibleif, the default value is checking multiple questions

What is the expected behavior? we could check/uncheck options with default value active

Tested page URL: https://plnkr.co/edit/LEwOG0YQZYyfP8Mt Test code

Specify your

• browser:
• browser version:
• surveyjs platform (angular or react or jquery or knockout or vue):
• surveyjs version:

Exisiting design:

Maybe it is useful to set "(3 of 12)"

Are you requesting a feature, reporting a bug or ask a question?

Bug

Hidden div

A hidden div is added to the head tag, this contains all svg icons. The head element does not allow flow content afaik: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head A simple fix is to use a template tag instead of a hidden div. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Use href

Use href, xlink:href is deprecated: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

Icon id collisions

The icons don't have a sv prefix in their ids, this can lead to collisions with pages already using those IDs. The solution for other ids and classes is to always prefix with sv-.

Keep DOM element as local as possible

This is mostly inspired by me trying to render it in a shadow DOM (and thus preventing my own CSS from leaking into the creator). When adding elements dynamically using javascript, I think it's cleaner to add them in your own element root. After all I'm calling creator.render(someElem), it seems reasonable to render everything inside that element if at all possible.

• css-fixes
• #2268
• surveyjs/survey-library#3690

You can use the following code to change the indentation in JSON Editor:

SurveyCreator.settings.jsonEditor.indentation = 3;

https://www.npmjs.com/package/devextreme-screenshot-comparer

See the https://surveyjs.answerdesk.io/ticket/details/t8281/error-after-update thread for more details

Survey.Serializer.getProperty("survey","title").isRequired = true;

SurveyAnalytics.VisualizationManager.registerVisualizer("nouislider", SurveyAnalytics.HistogramPlotly);

according to the design all drag and drop actions on touch devices should start after the "long tap"

Are you requesting a feature, reporting a bug or asking a question?

bug, I think

What is the current behavior?

choicesByUrl ignore parentpanel

How would you reproduce the current behavior (if this is a bug)?

https://plnkr.co/edit/kuhd1FgkyhIweh6d

We used to calculate currentPage on currentPage getter property. It creates issues in react and vue since currentPage could be changed during rendering which is incorrect approach for both these frameworks. It is better always have the correct currentPage and change it on adding/removing pages and change page visibility. This approach should increase perfomance for surveys with 100+ pages surveys.

Dynamic panel inside component should work in running mode even in SurveyJS Creator.

Otherwise by default it will submit users form

Are you requesting a feature, reporting a bug or asking a question?

bug

What is the current behavior?

if a question has a option with visibleif, the default value is checking multiple questions

What is the expected behavior?

we could check/uncheck options with default value active

Tested page URL: https://plnkr.co/edit/etOSdafU7i7GRqmA?preview Test code

### Specify your

* browser:
* browser version:
* surveyjs platform: jquery
* surveyjs version: 1.8

Need for the customization. See https://surveyjs.answerdesk.io/ticket/details/T8211

Are you requesting a feature, reporting a bug or asking a question?

• Possible bug

What is the current behavior?

The following validation in a expression question return valid:

{
     "type": "text",
     "name": "date_ok",
     "title": "Date with validation works with less than today",
     "isRequired": true,
     "validators": [
      {
       "type": "expression",
       "expression": "getDate({date_ok})<=today()"
      }
     ],
     "inputType": "date"
}

Current date: 2021-11-20 Input: 2021-11-21 Result: Valid input

What is the expected behavior?

{
     "type": "text",
     "name": "date_ok",
     "title": "Date with validation works with less than today",
     "isRequired": true,
     "validators": [
      {
       "type": "expression",
       "expression": "getDate({date_ok})<=today()"
      }
     ],
     "inputType": "date"
}

Current date: 2021-11-20 Input: 2021-11-21 Result: Invalid input

How would you reproduce the current behavior (if this is a bug)?

Using plnkr.co

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://plnkr.co/edit/E2dfm5vFJcQwoy2R

Specify your

• browser: Google Chrome
• browser version: 96.0.4664.45
• surveyjs platform (angular or react or jquery or knockout or vue): react and agular
• surveyjs version: 1.8.78

For detailed information see the ticket

Are you requesting a feature, reporting a bug or asking a question? Reporting a BUG

What is the current behavior? Changing the value of the choice box, when the title references a question that doesn't exist causes an infinite render loop.

vue.js:634 [Vue warn]: You may have an infinite update loop in a component render function.

found in

---> at src/vue/elementheader.vue at src/vue/element.vue at src/vue/row.vue at src/vue/page.vue at src/vue/survey.vue

Test URL: https://plnkr.co/edit/L1DW8eT9lrxPPppe

Specify your browser: Chrome browser version: 96.0.4664.45 surveyjs platform (angular or react or jquery or knockout or vue): Vue surveyjs version: 1.8.71

Note: I've seen other infinite update loops happen when a question is referenced, but doesn't exist. This locks up the survey entirely on production mode and freezes the browser.

See the https://surveyjs.answerdesk.io/ticket/details/t8247/spacing-issue-in-id-attribute for more details

We should set width/minWidth for td elements in total row in matrices.

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

I originally found this because I had some issues with infinite recursion in the event handler for the currentPageChange event.

If I try to read something like survey.currentPageNo I might trigger an infinite recursion:

public get currentPageNo(): number {
    return this.visiblePages.indexOf(this.currentPage);
  }

public get currentPage(): any {
    if (this.currentPageValue != null) {
      if (!this.isPageInVisibleList(this.currentPageValue) || this.pages.indexOf(this.currentPageValue) < 0) {
        if (
          !this.onContainsPageCallback ||
          !this.onContainsPageCallback(this.currentPageValue)
        ) {
          this.currentPage = null;
        }
      }
    }
    if (this.currentPageValue == null && !!this.firstVisiblePage) {
      this.currentPage = this.firstVisiblePage;
    }
    return this.currentPageValue;
  }

The issue here is that calling a getter in some circumstances also calls the getter, which then executes the onCurrentPageChanging callback again.

Doing some more research in the stack traces leads me to believe that this is possible regardless of

What is the expected behavior?

Never

How would you reproduce the current behavior (if this is a bug)?

Unclear; I know that on some larger surveys it is null and if the move is allowed the survey resets from the start.

Okay, bear with me, this is going to be hard to fathom.

• We have a panel with randomized questions inside, from these questions a subset is visible (this is done using a condition, but this doesn't change after initial load).

randomizeElements(isRandom: boolean): void {
    if (!this.canRandomize(isRandom) || this.isRandomizing) return;
    this.isRandomizing = true;
    var oldElements = [];
    var elements = this.elements;
    for (var i = 0; i < elements.length; i++) {
      oldElements.push(elements[i]);
    }
    var newElements = Helpers.randomizeArray<IElement>(oldElements);
    this.elements.splice(0, this.elements.length);
    for (var i = 0; i < newElements.length; i++) {
      this.elements.push(newElements[i]);
    }
    this.isRandomizing = false;
  }

This randomization function has some nasty side effects. First of all, it clears the questions inside the panel. This means the panel becomes invisible and so does the page it is contained in (the panel is the only question on the page).

Then questionAdded is triggered for every element (this is very inefficient, I think you could in this case, since you're just reordering, do a single assign without that event).

The questionAdded code updates the visible page indexes; so now the current page at a moment in time becomes not visible.

Then code later on that tries to check if the prev button should be shown (here we have entered knockout specific territory, this is triggered from some observable). isShowPrevButton() calls get state(), which in turn calls get currentPage().

At this point the logic in there checks if the current page is visible, which it is not, and thus it resets the current page to the first visible page.

This restarts the loop with a different page, which might also have a randomized panel inside...

I've spend a couple of hours on debugging this; I'll try to get some simple reproduction example another time.

Are you requesting a feature, reporting a bug or ask a question?

Asking a question

What is the current behavior?

When the 'show all pages' option is selected rather than a specific page, the title of the survey is editable If 'page1' is selected, the title field no longer appears:

We currently change the titles of the surveys as part of a different process, and do not want the title to be editable in the Survey Creator. Is there either:

A way to set 'show all pages': false in config, and hide the dropdown

or

A way to hide specific fields in the translation tab?

Thanks

• the ability to change toolbox location (left/right)
• the ability to change property panel location (left/right)
• toolbox & property panel in one panel

Sometimes drag and drop caused two type of react warnings

1. Render should be a pure function - see https://github.com/surveyjs/survey-creator/issues/2215
2. Same key

• Align buttons by icons, not by invisible border (see fig. 1):
• Align panel buttons to right (see fig. 2 and just apply the css):

Fig 1:

Fig 2:

.svc-question__content-actions {
  .sv-action:first-child:not(.sv-action--first) {
    margin-left: auto;
  }
}

Current view:

Need to be:

get currentPage getter has side effects which caused react warning:

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function...

  public get currentPage(): any {
    if (this.currentPageValue != null) {
      if (!this.isPageInVisibleList(this.currentPageValue) || this.pages.indexOf(this.currentPageValue) < 0) {
        if (
          !this.onContainsPageCallback ||
          !this.onContainsPageCallback(this.currentPageValue)
        ) {
          this.currentPage = null;
        }
      }
    }
    if (this.currentPageValue == null && !!this.firstVisiblePage) {
      this.currentPage = this.firstVisiblePage;
    }
    return this.currentPageValue;
  }

could be reproduced by drag drop question from the toolbox to the first position (the page should contain some questions before it)

need to investigate current state and give the estimations

found problems:

• #2221
• #2222
• #2223
• #2224

https://surveyjs.answerdesk.io/ticket/details/t8202/logo-position

Changes of this variable cause the following behavior

See the https://surveyjs.answerdesk.io/ticket/details/t8244/survey-analytics-charts-issue thread for more details

Percentages sum = 101, that is wrong