Bug

Dropdown type question are not read by screen readers. JAWS for example just says "empty"

Dropdown options are recognized and read by screen readers like JAWS or NVDA

Open a survey with dropdown menus and use a screen reader.

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

• Run the following demo in defaultV2 theme: https://surveyjs.io/form-library/examples/questiontype-matrix-customcelltypes/reactjs.
• Select multiple items in a tagbox.
• A file question's placeholder text goes beyond the available area:

https://github.com/surveyjs/survey-library/blob/056c8ded89650c24ecf6236f7d35c91382da288a/src/question.ts#L284 Example

Example

The max length indicators for both fields is rendered at a wrong position:

Example

The maxLength label should be normally displayed as follows:

However, in a Matrix Dynamic cell, the label disappears as long as you start typing. Instead, the label is shown at the bottom of a table:

Why does panel use for page in this mode? It looks unnecessary.

bug, I guess

questions using choicesFromQuestion (where the dependent question is a checkbox or tagbox) does not get cleared when the current selected option become unavailable. It actually disappear from the data but not from the input field

to also disappear from the input field as it is always been

try unselecting "albania" from the following:

https://plnkr.co/edit/6wvYy4K2sJ7GX3a5

thank you

See an example: https://plnkr.co/edit/zG6L9nMHRgbRUjTE

According to @RomanTsukanov's request, we should do the following rename:

onBeforeDrop should become onDragStart onAfterDrop should become onDragEnd

Original issue

Task: set the default value of the hideIfChoicesEmpty property to true for Radiogroup questions. Issue: the following code doesn't enable the hideIfChoicesEmpty property by default:

let hideIfChoicesEmptyProp = Serializer.getProperty(
    "radiogroup",
    "hideIfChoicesEmpty"
);
hideIfChoicesEmptyProp.defaultValue = true;

Example

Original issue: T12089 - Custom Question Indices overlap question names To reproduce the issue, define a custom questionStartIndex (for example, set it to 1.0.1): Example](https://plnkr.co/edit/lwcxMn9i66CNb5IN).

Question indices overlap question names:

It will be nice to have support for "maxSelectedChoices" property in tagbox similar to checkbox.

(lazy loading) The first screen shouldn't be "No Data". At least we could use "Loading...".

Run the following demo: Matrix - Custom cell types

• Select multiple subjects
• Close the popup
• Selected items disappear in the input box:

bug

'allOff'

'allOf'

https://github.com/surveyjs/survey-library/blob/master/docs/surveyjs_definition.json

https://github.com/surveyjs/survey-library/blob/d343e57ed871bb80a0d65fd4a72f0a04b597417e/docs/surveyjs_definition.json#L408

And all of following allOff

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

Originally posted at https://github.com/surveyjs/survey-library/issues/5725.

The error notification should not disappear automatically. This notification contains an actiuon allowing users to re-submit the survey data.

Original issue: T12348 - Prevent the automatic selection when pressing the "space" key in a dropdown search (Dropdown doesn't allow entering white spaces into the search box)

Example Type the text and press a Space bar. Issue: The first item in a list is selected; Expected behavior: a white space is added.

https://user-images.githubusercontent.com/22372972/225247268-b4e83acf-66d4-4974-89ea-1588fcd432a7.mp4

If a developer wants to correct the value input in composite component then it is impossible to do it with the current API.

  /**
   * A function that is called before a question value is changed. It returns a new value. If you want to change a new value you can return your own value
   * If function returns undefined the question value will be cleared.
   *
   * Parameters:
   *
   * - `question`: [Question](https://surveyjs.io/Documentation/Library?id=Question)\
   * A custom question.
   * - `name`: `String`\
   * The question's [name](https://surveyjs.io/Documentation/Library?id=Question#name).
   * - `newValue`: `any`\
   * A new value for the question.
   */
  onValueChanging?(question: Question, name: string, newValue: any): any;

UPDATE: survey.timeSpent is writable now, it has setter.

Original issue Usage Scenario: a user may want to continue an incomplete quiz. Earlier we recommended to use survey.timeSpent and page.timeSpent settings. However, now these settings are read-only.

Suggestion: Implement a public API to allow developers to specify the time a user already spent on a whole survey and a particular page.

When the rateType is "stars" or similar, rateValues should be used with their indexes.

bug

when using option storeOthersAsComment: false the other element rendering is wrong

https://codesandbox.io/s/hopeful-cdn-2jo002?file=/src/json.js

Original issue: T12398 - savingDataSuccess popup message at the end of survey doesn't change correctly with --base-unit. https://surveyjs.answerdesk.io/internal/ticket/details/T12398

Increase the survey element font size using the --base-unit variable:

.sd-root-modern {
  --base-unit: 14px;
}

Notice that the data saving message, which appears at survey completion, doesn't fit into the available area: example.

The --base-unit setting is not applied to a questions' description text: example

Original issue: https://surveyjs.answerdesk.io/internal/ticket/details/T12397.

The dropdown list shows in 1/3 of screen on IPad in portrate mode while text items are cut.

User found out that stars are not affected by --base-unit variable, he made a reproduction case, when you change the value in selector to lower than 7.5px, stars don't get smaller and get chunked.

bug

when using choicesFromQuestion and dropdown together and try to open the dropdown SurveyJS crashes

to work as it was a radio question

https://plnkr.co/edit/0zLsucOujttntVSM

Issue: it is impossible to drop a panel after another panel at the end of a page. To reproduce: run this example, and try to drop a panel after the Sedentary behavior panel. Expected behavior: a page appears at the end of a page.

Example Original issue

Task: to remove the Run Expression trigger from a list of available trigger types. The following code works for a complete trigger:

import { Serializer } from "survey-core";

Serializer.removeClass("completetrigger");

However, if you run the following code, the Cannot read properties of null (reading 'getType') exception is thrown on an attempt to add a trigger.

import { Serializer } from "survey-core";

Serializer.removeClass("runexpressiontrigger");

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/Creator?node-id=15561%3A122420

• text colors (main title, descriptions)
• difference between paddings for highlight and edit modes
• corner radius (maybe depends on border style — inside or outside)

The default operator can be changed from "equal" to any other operator using the following code:

import { settings } from "survey-creator-core";

settings.logic.defaultOperator = "notempty";

We need to create separate source maps files as we did for SurveyJS Library.

function saveSurveyToPdf(filename, surveyModel, pdfWidth, pdfHeight) { var options = { fontSize: 12, margins: { left: 10, right: 10, top: 10, bot: 10 }, format: [pdfWidth, pdfHeight], compress: true, //Using this, responses not rendered - once commented, responses render fine htmlRenderAs: 'image', commercial: true }; var surveyPDF = new SurveyPDF.SurveyPDF(surveyJSON, options); surveyPDF.data = surveyModel.data; surveyPDF.save(filename); }

Reporting a bug

Responses not rendered using the "compress" option

Responses should be rendered

Detailed in code example comments

Tested page URL:

Test code

<script src="https://unpkg.com/survey-jquery@1.9.55/survey.jquery.min.js"></script>
<script src="https://unpkg.com/survey-pdf@1.9.55/survey.pdf.min.js"></script>
function saveSurveyToPdf(filename, surveyModel, pdfWidth, pdfHeight) {
    var options = {
      fontSize: 12,
      margins: {
        left: 10,
        right: 10,
        top: 10,
        bot: 10
      },
      format: [pdfWidth, pdfHeight],
      compress: true, //Using this, responses not rendered - once commented, responses render fine
      htmlRenderAs: 'image', 
      commercial: true
    };
    var surveyPDF = new SurveyPDF.SurveyPDF(surveyJSON, options);
    surveyPDF.data = surveyModel.data;
    surveyPDF.save(filename);
  }

• browser: Microsoft Edge
• browser version: Version 110.0.1587.69 (Official build) (64-bit)
• surveyjs platform (angular or react or jquery or knockout or vue): jquery
• surveyjs version: 1.9.55

Reporting a bug

functions added to event listeners have undefined (implicitly any) types, which is not how it previously functioned nor how it is defined in documentation

Types are fully defined

Using survey-react v1.9.66 and typescript with noImplicitAny: true, attempt to .add an event listener to a Model object, see the compiler error.

Tested page URL: WORKING EXAMPLE: https://codesandbox.io/s/surveyjs-1-8-63-types-x6hfk4

BROKEN EXAMPLE: https://codesandbox.io/s/surveyjs-1-9-66-types-fz258e

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

The noEntriesText message used now suggests that users "Click the button below to add a new entry.". However, there are no such button when allowAddPanel: false. We need to use noEntriesReadonlyText in this case.

A usage scenario: to implement a custom trigger which runs when a user switches to the next page. Issue: the custom trigger won't be activated when a user completes the last survey page if we check for the isOnNextPage option in the canBeExecuted function.

canBeExecuted(isOnNextPage: boolean): boolean {  
    return isOnNextPage;
}

UPDATED: A new protected function "canBeExecutedOnComplete" has been added. It should return true.

canBeExecuted(isOnNextPage: boolean): boolean {
      return isOnNextPage;
}
canBeExecutedOnComplete(): boolean {
     return true;
}

Workaround: to call the survey.checkOnPageTriggers function on the onCompleting function:

model.onCompleting.add((sender, options) => {
   sender['checkOnPageTriggers']();
});

However, this code uses a private API, which is not basically recommended.

Suggestion: add an option to run the custom trigger when a user completes the last survey page.

The origional issue has been described here

Step to reproduce. Create a text question with inputType equals to "number", set min/max properties and do not make it requried.

1. enter incorrect value
2. clear the value
3. on trying to submit the error is shown. Here is the example.

Example

Original issue: T12318 - Table Of Contents - The Current Tab is not changed when clicking Next

Original issue

The maxLength property is defined for survey elements. For example:

• Survey and question titles

  • T11363 - Showing the maxLength for question titles
  • T11269 - Title inputs don't respect maxLength when copy pasted in the Survey directly (in place edits)
  • T9290 - How to put a max length limit to the title of any question in the survey creator?
  • T7333 - maxLength not working in creator V2

• Question Description

  • T7849 - Description property validation

• Choice items

  • T11365 - Showing the number of allowed characters for Radiogroup and Checkbox questions
  • T8707 - Indicating radiogroup/checkbox/dropdown options value characters length

• The 'Other' option's caption:

  • T7948 - Set the number of characters that can be entered in "other" of "checkBox"

• Any text input in Creator:

  • T7333 - maxLength not working in creator V2

Suggestion: inform users while typing about the number of remaining characters: for example, 5/10.

Suggestion: make the toolbox.createDefaultItems public. The task: to add a custom component at runtime and make it available in a toolbox. Original issue: T12189 - Register a custom component when the Survey Creator was rendered.

Example. Create a Set Value trigger, and select an HTML question as a target question. The Set Answer button brings up a popup window with an HTML question; however, there is no way to specify a value for the HTML question.

I suggest that we exclude HTML questions from a list of available questions; or, allow users to set HTML instead of a value (since the HTML question doesn't actually have a value).

Creator V2 set "logoPosition" property to the "right" by modifying the model. We need to set it to the "right" for new surveys only. If JSON is not set or it set as empty value, for example:

//It will set the logo position to the right;
creator.JSON = undefined;
//The logo position will have the defautl value "left".
creator.JSON = { elements: [{ name: "q1", type: "text "}]};
//It will set the logo position to the right;
creator.text = "";

The issue: options.value is actually a previos property value, and options.newValue is a value just specified by a user (and a developer may correct it). However, the current options description is irrelevant.

Original issue: T12301 - [DOCUMENTATION] onPropertyValueChanging arguments are misleading https://surveyjs.answerdesk.io/internal/ticket/details/T12301

Suggested corrections: options.value - The propery value before the change made by the user. options.newValue - The value the user just entered. You can specify this field if you want to override the newly entered value.

Please correct the survey.showTOC property display name.

Hi,

When I build survey-jquery in my survey-jquery-webpack-playground I see:

$ yarn build:js
yarn run v1.22.10
$ webpack --mode=production
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it
Hash: f8b2894639b5cbdb3923
Version: webpack 4.46.0
Time: 1027ms
Built at: 10/07/2021 21:42:48
  Asset      Size  Chunks                    Chunk Names
main.js  1.43 MiB       0  [emitted]  [big]  main
Entrypoint main [big] = main.js
[0] ./node_modules/jquery/dist/jquery.js 282 KiB {0} [built]
[1] ./node_modules/survey-jquery/survey.jquery.js 6.54 MiB {0} [built]
[2] ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB {0} [built]
[3] ./src/main.js 1.06 KiB {0} [built]
[4] ./node_modules/survey-jquery/survey.min.css 498 bytes {0} [built]
[5] ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB {0} [built]
[6] ./node_modules/css-loader/dist/cjs.js!./node_modules/survey-jquery/survey.min.css 23.4 KiB {0} [built]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main.js (1.43 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (1.43 MiB)
      main.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Question: why survey.jquery.js 6.54 MiB is so big? 🤔

Best regards, Stéphane

It will be better if DropdownListModel could use visibleChoices array directly without mapping it on its actions.

Hello

it's possible not show the buttons in all the pages in the progress bar. The idea is not overwhelm the user, because I have 15 pages in the survey I just want show the button in certain pages(like sections in the survey). If the user press button, just go to the page where the navigationTitle was placed I guess another person had the same concern than me in this issue: https://github.com/surveyjs/survey-library/issues/443 but not sure

Regards

Survey navigation/Table Of Contents panel helps survey respondents go through a survey and directly access a required questionnaire item. It is especially useful for large surveys: when there are a lot of questions in a questionnaire. With a navigation bar, respondents can easier access questions and have greater control over the flow.

Currently, SurveyJS has the following navigation options:

• Button navigation (for small surveys) https://surveyjs.io/form-library/examples/navigation-buttons/reactjs
• Custom navigation: an example on how to implement a drop-down menu with a question list for easier navigation (for example, for large surveys). https://surveyjs.io/form-library/examples/survey-customnavigation/reactjs

Suggestion: implement a left-side panel / a sidebar navigation.

Customer requests:

• The Left-Side Navigation Panel
  • T10046 - Navigation Placement design the navigation on left in surveyjs?
  • T11738 - Need to show survey in Preview mode only page navigation buttons
• An External Page Selector to Navigate to a Specific Page
  • T10404 - How to setup an external PageSelector for a Multi-page Survey
  • T386 - Is there a way to jump directly to a survey page?
• In PDF - Question Titles in the Header, clicking a title navigates to the question.
  • Table of Contents for easier navigation having the question titles in the header and when you click on the title it takes you to the individual question in the pdf (with a large number of questions it would make it easier to check the pdf)

Third-party alternatives

• A Sidebar

https://www.qualtrics.com/support/survey-platform/survey-module/survey-flow/advanced-elements/table-of-contents/

See also the internal issue - https://github.com/surveyjs/service/issues/702

Please, see: https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/Creator?node-id=15811%3A137758&t=FCCqrAMu7GSL7rB8-4

Original issue: T11468 - Auto Complete dropdown with API.

Example To reproduce the issue, type in 'India' in the search box. The item appears, and immediatelly disappears:

https://user-images.githubusercontent.com/22372972/220605619-cf7e2fdc-b7e2-411c-9b62-17d59f116330.mp4

Original issue

The following code doesn't change a default value for a File question in React: the Allow Multiple Files checkbox remains unchecked.

let prop = Serializer.getProperty("file", "allowMultiple");
prop.value = true;
prop.defaultValue = true;

Example.

In Knockout, the above code actually changes the Allow Multiple Files checkbox value: However, the JSON schema comes with a wrong value:

{
     "type": "file",
     "name": "question1",
     "allowMultiple": false
}

Example.

jQuery: Example.

Example. A comment field uses the following validation:

"validators": [
      {
       "type": "text",
       "text": "The answer must contain at least 10 characters",       
       "minLength": 10,
       "allowDigits": false       
      }

However, when the following text doesn't pass validation (even though it is longer than 10 characters):

The text passes validation if I remove a dot:

Expected behavior: dots are allowed regardless of the allowDigits property value.

• how to reproduce? just use the following styles for your survey:

.sv-ranking {
  display: flex;
  flex-direction: column;
 }

• workaround:

.sd-root-modern .sv-ranking {
  display: flex;
  flex-direction: column;
 }

• possible fix (we should test it on mobile devices to apply the fix):

.sv-ranking-shortcut[hidden] {
  display: none;
}

The task: to preserve the name of a question container (e.g., page, panel) in survey result structure.

For example, if questions are located in a page or panel, survey results should follow:

[
   {
      "panel1":
         {
           "Name":"TEST",
           "Mobile":"984378547"
         }
    },
    {
      "panel2":
         {
           "Name 2":"TEST",
           "Mobile 2":"984378547"
         }
    }
    ...
]

Customer requests:

• T12160 - Show Panel Name as Key in SurveyResults
• T12073 - I need a title in Output JSON

Original issue: T12205 - Pre-saved data in dropdown is lost.

Issue: if a Dropdown/Tagbox has the defaultValue and enables the lazy loading option, the default value is not saved to survey results. To reproduce the issue, follow these steps:

• Run the Lazy Loading demo. The France is set as a default value:

• Don't change the value, and complete a survey. Survey data is empty; it doesn't include the default question value:

Expected behavior: survey results include a value specified for a Dropdown:

Here is the example with 1K records. Please modify it to 10K to see the issue.

A custom widget renders an additional svc-panel__placeholder_frame element:

Source issue (with an example): T12030 - Survey Creator Angular - Custom Question - An unnecessary panel placeholder is added to a custom question widget

Reporting a bug

If you add a radio group question in creator, then add the "None" option then click there the drag and drop icon would normally be this creates an uncaught exception.

There is no exception.

Explained above

Tested page URL: The demos on the product website have this issue.

• browser:
• Reproduced in recent chrome and brave.
• editor version: 1.9.74 and whatever is live on the website for demos.

Original issue: T12213 - How to add required validation on survey title and description

Example.

I set a survey.title property as required, and specified default title & description. However, the creator still allows me to leave empty values:

import { Serializer } from "survey-core";

Serializer.getProperty('survey', 'title').isRequired = true;
...
creator.survey.title = "Sample Survey Title";
creator.survey.description = "Sample Survey Description";

I just tried surveyjs in angular

adding a logo, which is svg ("data:image/svg+xml;base64,...."), i get an error when i try to use savePdf() png or jpg images working fine ("data:image/png;base64,..)

ERROR Error: addImage does not support files of type 'UNKNOWN', please ensure that a plugin for 'UNKNOWN' support is added. P jspdf.es.min.js:86 addImage jspdf.es.min.js:86 DrillForContent survey.pdf.js:10544 process survey.pdf.js:10840 done survey.pdf.js:10692 onload survey.pdf.js:10718

here is an codesandbox, i modified your code example (check json.ts for survey content)

punch the top button, and you get the error in the console

Original issue: T12164 - UI break in Survey data dashboard in tabular form. On smaller screens (tablet devices/mobile devices), the row selector is displayed at a wrong position (example).

Previously, the drop-down menu was closed after a user selected a value. Users had to reopen the menu every time they wanted to select more values.

Now, the drop-down menu remains open to allow users to select as many values as they want. To close the menu, users can click the area outside it or click the input field.

If you want to revert to the previous behavior, enable the closeOnSelect property:

// Option 1: Enable the `closeOnSelect` property for an individual question
{
  "name": "question1"
  "type": "tagbox",
  "closeOnSelect": true
}

// Option 2: Enable the `closeOnSelect` property for all Tag Box questions

Creator and Preview (safari)

We have the following line "survey-core": "*" in package.json "dependencies" section of package.json for "survey-react-ui", "survey-angular-ui" and "survey-knockout-ui". It should be the exact version, for example "survey-core": "1.9.75" for version "1.9.75". We did it already for "survey-creator-angular", "survey-creator-react" and "survey-creator-knockout" packages.

Original issue: https://surveyjs.answerdesk.io/internal/ticket/details/t11721.

The creator.onAfterDrop event is not raised when a user reorders pages or choices in a property grid: example. Expected behavior: the creator.onAfterDrop event is raised and contains information about the dropped item.

@RomanTsukanov Proposal we will have three DnD event types:

1. creator.onAfterDrop - for survey elements on Design Surface - legacy! we can't change it
2. creator.onChoicesAfterDrop - for "choices" reordering
3. Survey.onMatrixRowAfterDrop - for matrices dnd

The current name looks like it is a method that tells the component to count pages. Besides, the Survey object has a property called pageCount. It would be nice to keep the API consistent.

In the newest versions of SurveyJs (> 1.9.54) custom widgets are not working anymore. Everything is working fine in Version 1.9.54. In my tests the isFit function is not called anymore.

Bug, Regression

Custom Widgets not working

Custom Widgets working

Change Version of SurveyJs from Version 1.9.54 to Version > 1.9.54

CustomWidgetCollection.Instance.addCustomWidget({ ... name: 'my-widget', title: 'SurveyJs Creator', isFit: question => { // This is not called!!!! } ... }, "customtype")

• no drag indicator (Safary only)
• circle size
• floating item size
• editing mode - creator editing border:
• indicator position (mobile) :

See original design — https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SJS-Creator?node-id=9397%3A48582&t=loNh6Fq16DtZwLxq-4

and for the mobile - https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/Creator?node-id=10034%3A78153&t=kL5yFGm88ST1tKem-4

Usage scenario: Text input fields (e.g., Text, Comment questions) define the maxLength property:

{ 
   "elements": [
    {
     "type": "text",
     "name": "question1",
     "maxLength": 5
    }
   ] 
}

Display the Current/Max allowed characters for input fields.

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SJS-Creator?node-id=15621%3A130528&t=Cv4KVqJw3dKQ8fzw-4

• why the first item has background? Dropdown keyboard edit #5622

• we have to figure out with states (discuss) https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/Creator?node-id=16075%3A166365

• wrong text style (should be bold)

• popup should hide by Done button only (mobile, default) https://github.com/surveyjs/survey-library/issues/5645

The following JSON doesn't work well on iPad:

{
     "type": "matrixdynamic",
     "name": "question",
     "columns": [
      {
       "name": "col1",
       "cellType": "comment"
      }
     ],
     "allowRemoveRows": false,
     "rowCount": 3,
     "allowRowsDragAndDrop": true
}

Source ticket.

Please, see an example: https://plnkr.co/edit/wUWzXV69KJ0voV95

Downloads by versions: https://www.npmjs.com/package/@angular/core?activeTab=versions

Original issue

Run this example. The third matrix (Total Amount) calculates the summary for the first two matrices. The problem: Total Amound value doesn't appear in survey results, when the readOnly flag is enabled for this Total Amount matrix:

 {
     "type": "matrixdropdown",
     "name": "totalAmount",
     "isRequired": true,
     "readOnly": true,
     "columns": [
      {
       "name": "Column 1",     
       "totalExpression": "{q1-total.amount} + {q2-total.amount}"
      }
     ]
}

Expected behavior: the TotalAmount-total.amount value appears in survey results (example).

"totalAmount-total":{"Column 1":110}}'

A noticed after updating to 1.9.72, that my prettycheckbox widgets are broken. After experimenting with various versions I discovered that there is an issue in survey-react sinse 1.9.67. The verstion 1.9.66 works fine. You can test it in any sandbox, please note that in HTML markup no any "pretty" CSS class anymore.

Ranking questions cannot have special choices (Other, Select All, None). The separateSpecialChoices option is unnecessary.

Original issue: T12048 - Setting pageNo to the questions. The questionStartIndex is set to 2.01. However, a survey shows this as 2.1: Example.

Original issue: T12053 - Comment text does not wrap when screen is small.

Enable the Comment box for a question, define the Comment area text. Switch to a mobile screen - the comment label overlaps the available area. Example

We have settings.matrixMaxRowCountInCondition property but we do not have the same for panel dynamic:

  /**
   * Maximum panelCount that returns in addConditionObjectsByContext function
   */
panelDynamicMaxPanelCountInCondition: 1

We need it to avoid strange behaviour when we change the image of item

also we need Item 1, Item 2 for Tag Box

I created a calculated field which doesn't have an expression (it is specified from code using the survey.setValue function). Example. Issues:

• A calculated field is unavailable in a list of objects when creating a logic expression inside a logic tab;
• The Logic tab throws a validation error. quizTotalScore is a calculated field specified from code.

Original issue: T12052 - Translation tab feedback.

To reproduce the issue:

• Open the demo.
• Activate the Translation tab - it contains Deutsch in a list of translated languages.
• Activate a language selector drop-down.
• Obserge Deutsch in a list. Click it. Activate the drop-down again: the Deutsch option disappears. https://user-images.githubusercontent.com/22372972/218987920-2810315d-804a-45d1-b549-9b3d135e4186.mp4

How to remove unnecessary/unsupported languages from a survey JSON. Consider these options:

• An API method;
• A Survey Creator Option.

The task was discussed in the following tickets:

• T12052 - Translation tab feedback https://surveyjs.answerdesk.io/internal/ticket/details/T12052

• T11480 - Remove localized strings from survey JSON https://surveyjs.answerdesk.io/internal/ticket/details/T11480

To reproduce the issue:

• Drop a Multiple-Choice Matrix to a survey;
• Navigate to Layout -> Enable the Vertical column orientation
• Select the first matrix column;
• Change its Cell type to Radiogroup.
• The following exception is thrown:

survey.core.min.js:6 Uncaught TypeError: Cannot read properties of null (reading 'whenPanelFocusIn')
    at n.focusIn (survey.core.min.js:6:729377)
    at HTMLDivElement.<anonymous> (knockout.js:445:350)
    at t.updateOnHiding (survey.core.min.js:24:94684)
    at t.updateOnHiding (survey.core.min.js:24:102228)
    at Object.n [as func] (survey.core.min.js:24:92019)
    at e.propertyValueChanged (survey.core.min.js:6:134224)
    at e.setPropertyValue (survey.core.min.js:6:133058)
    at t.set (survey.core.min.js:6:190245)
    at t.onBlur (survey.core.min.js:6:645302)
    at Object.blur (survey-knockout-ui.min.js:6:174091)

See this video: https://user-images.githubusercontent.com/22372972/219423352-4f0cb171-3484-45eb-8bd0-aa396308ed0e.mp4

Issue 2: Proceed with editing the Radiogroup column:

• Select Column1;
• Open the Choice property grid category;
• Add two custom choices.
• The following exception is thrown:

survey.core.min.js:6 Uncaught TypeError: Cannot read properties of null (reading 'locText')
    at e.get (survey.core.min.js:6:336095)
    at attr (eval at parseBindingsString (knockout.js:305:238), <anonymous>:3:204)
    at update (knockout.js:425:43)
    at a.$.l (knockout.js:336:468)
    at Function.yd (knockout.js:205:95)
    at Function.zd (knockout.js:204:61)
    at Function.ha (knockout.js:200:404)
    at Function.Hc (knockout.js:200:203)
    at Function.notifySubscribers (knockout.js:140:516)
    at Function.xa (knockout.js:154:154)

• Navigate to Preview, and back to the designer: rows disappear. See this video: https://user-images.githubusercontent.com/22372972/219424243-a9e33147-4224-44b8-b4fd-eea43547acdd.mp4

Orange Banner

• wrong font style

Footer

• wrong height
• wrong logo size
• wrong font styles (bold and colors)
• lost top border

https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/SJS-Creator?node-id=14373%3A174184

The following video shows that checkboxes can be selected or unselected even when the mouse pointer is way off them:

Video

The response area should be limited to the box and the label, with some margin:

At least for these elements.

Reporting a bug

When you have a check box group whose choices are loaded from the choices selected on a previous question, if the user selects the "Other" option and enters text, that text is not copied over to the new question.

The text that was entered when "Other" was selected should be displayed among the list of options.

1. Define a question of type "checkbox" with the Other option available.
2. Define another question of type checkbox whose choices will come from the selected choices in the first question.
3. Start survey
4. Select "Other" and enter some text for the first checkbox question
5. Proceed to the next checkbox question

Tested page URL:

Test code

your_code_here

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

The event is needed to override a question display value in the code. For example SurveyJS returns empty string for empty question, but you may need to show "" string or any other value. For example you have a question with the following title: ", please enter your birth date." If "customerName" is empty showing ", please enter your birth date." doesn't look good. You can show: ", please enter your birth date." or ", please enter your birth date." Here is the example:

  survey.onGetQuestionDisplayValue.add((sender, options) => {
    if(options.question.isEmpty()) {
      options.displayValue = "<Empty>";
    } else {
      options.displayValue = "[" + options.displayValue + "]";
    }
  });

https://surveyjs.io/form-library/examples/survey-multilanguages/reactjs

After upgrading to v1.9.71, the survey-angular library requires a newer TypeScript version.

• T11907 - Build error in angular project after upgrade to v1.9.71
• T12000 - Compilation Probelm
• T11973 - Does Survey js support angular versions 10 and node 12?
• https://github.com/surveyjs/survey-library/issues/5628

This causes problems as developers require to update their TypeScript version.

Add a new callback function into ICustomQuestionTypeConfiguration configuration:

  /**
   * A function that is called each time a question nested within a [composite question](https://surveyjs.io/Documentation/Survey-Creator?id=create-composite-question-types) requires to update it's css classes.
   *
   * Parameters:
   *
   * - `question`: [Question](https://surveyjs.io/Documentation/Library?id=Question)\
   * A composite question.
   * - `element`: [Question](https://surveyjs.io/Documentation/Library?id=Question)\
   * A nested question.
   * - `cssClasses`: `any`\
   * an object with CSS classes. For example `{root: "table", button: "button"}`. You can change them to your own CSS classes.
   */
  onUpdateQuestionCssClasses?(question: Question, element: Question, cssClasses: any): void;

It can be used as the following:

  const json = {
    name: "fullname",
    elementsJSON: [
      { type: "text", name: "firstName" },
      { type: "text", name: "lastName" },
    ],
    onLoaded: (question) => {
      const firstName = question.contentPanel.getQuestionByName("firstName");
      firstName.value = "Jon";
    },
    onUpdateQuestionCssClasses: (question: Question, element: Question, css: any) => {
      if(element.name === "firstName") {
        css.root = "css_question1";
      }
      if(element.name === "lastName") {
        css.root = "css_question2";
      }
    }
  };
  ComponentCollection.Instance.add(json);

According to the Whatsnew Page is a new Version "released" 1.9.72. It seems that the Tag 1.9.72 for the survey library branch is missing. Pls add the Tag when you are ready for the release of this version, thx!

based on https://surveyjs.answerdesk.io/ticket/details/T12008

Updated: text question autoComplete property doesn't have an empty choice. The work-around:

Survey.settings.questions.dataList.unshift("");

Original issue: T12013 - No way to clear autocomplete property

It is impossible to clear the Autocomplete property or reset to default the Input type property using Property Grid:

Example Original issue: T11862 - Matrix Dropdown - Validation doesn't work.

A survey has checkErrorsMode = 'onValueChanged'. The first Matrixdropdown has a validation rule which checks if the sum over two matcies equals 100. However, the validation message is not updated when you enter values to the second matrix (Matrixdynamic).

It works as expected when you enter values to the first matrix - a validation message is updated correctly.

https://user-images.githubusercontent.com/22372972/218407427-fef5a30a-99fd-4b57-b93c-5783994ff52e.mp4

However, the validation message is not cleared up if you enter the 98 value to the second matrix instead:

https://user-images.githubusercontent.com/22372972/218407633-f9f2f48c-fff4-4bd8-bf70-9ff39798f273.mp4

Desktop is ok:

Mobile is ok:

Design mode - terible:

{
 "title": "Pizza Order Form",
 "logoHeight": "100px",
 "logoPosition": "right",
 "completedHtml": "<h3>Thank you for placing the order!</h3>",
 "pages": [
  {
   "name": "page2",
   "elements": [
    {
     "type": "panel",
     "name": "panel3",
     "elements": [
      {
       "type": "dropdown",
       "name": "qty_n",
       "minWidth": "100px",
       "title": "Qty",
       "hideNumber": true,
       "choices": [
        {
         "value": "Item 1",
         "text": "1"
        },
        {
         "value": "Item 2",
         "text": "2"
        },
        {
         "value": "Item 3",
         "text": "3"
        },
        {
         "value": "Item 4",
         "text": "4"
        },
        {
         "value": "Item 5",
         "text": "5"
        }
       ],
       "allowClear": false
      },
      {
       "type": "dropdown",
       "name": "size_n",
       "minWidth": "100px",
       "startWithNewLine": false,
       "title": "Size",
       "hideNumber": true,
       "choices": [
        {
         "value": "5",
         "text": "Small"
        },
        {
         "value": "6",
         "text": "Medium"
        },
        {
         "value": "7",
         "text": "Large"
        }
       ],
       "allowClear": false,
       "autocomplete": "name"
      }
     ],
     "title": "Pizza Neapolitan"
    },
    {
     "type": "panel",
     "name": "panel3",
     "elements": [
      {
       "type": "dropdown",
       "name": "qty_m",
       "minWidth": "100px",
       "title": "Qty",
       "hideNumber": true,
       "choices": [
        {
         "value": "Item 1",
         "text": "1"
        },
        {
         "value": "Item 2",
         "text": "2"
        },
        {
         "value": "Item 3",
         "text": "3"
        },
        {
         "value": "Item 4",
         "text": "4"
        },
        {
         "value": "Item 5",
         "text": "5"
        }
       ],
       "allowClear": false
      },
      {
       "type": "dropdown",
       "name": "size_m",
       "minWidth": "100px",
       "startWithNewLine": false,
       "title": "Size",
       "hideNumber": true,
       "choices": [
        {
         "value": "6",
         "text": "Small"
        },
        {
         "value": "7",
         "text": "Medium"
        },
        {
         "value": "8",
         "text": "Large"
        }
       ],
       "allowClear": false
      }
     ],
     "title": "Marinara",
     "startWithNewLine": false
    },
    {
     "type": "panel",
     "name": "panel6",
     "elements": [
      {
       "type": "dropdown",
       "name": "qty_p",
       "minWidth": "100px",
       "title": "Qty",
       "hideNumber": true,
       "choices": [
        {
         "value": "Item 1",
         "text": "1"
        },
        {
         "value": "Item 2",
         "text": "2"
        },
        {
         "value": "Item 3",
         "text": "3"
        },
        {
         "value": "Item 4",
         "text": "4"
        },
        {
         "value": "Item 5",
         "text": "5"
        }
       ],
       "allowClear": false
      },
      {
       "type": "dropdown",
       "name": "size_p",
       "minWidth": "100px",
       "startWithNewLine": false,
       "title": "Size",
       "hideNumber": true,
       "choices": [
        {
         "value": "5",
         "text": "Small"
        },
        {
         "value": "6",
         "text": "Medium"
        },
        {
         "value": "7",
         "text": "Large"
        }
       ],
       "allowClear": false
      }
     ],
     "title": "Pepperoni",
     "startWithNewLine": false
    }
   ],
   "title": "Menu"
  }
 ],
 "completeText": "Submit",
 "questionsOnPageMode": "singlePage",
 "widthMode": "static",
 "width": "1400"
}

Usage scenario: to initiate events when a survey element is dragged and dropped: either from within the same page/panel or to a different page/panel altogether. Source ticket: T11641 - Dragging and Dropping Elements.

Suggestion: enhance the onBeforeDrop/onAfterDrop events and add information about:

• The source element: the parent element - where we drag an element from;
• A dragged element;
• A drop target.

Plus - consider the scenario when users drag and drop entire panels (T11718 - Dragging a panel only recognizes the last element in the panel and dragging Pages is not recognized).

• there should not be paddings (left and right)
• button position
• no button hover

Original design — https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/Creator?node-id=2281%3A116403&t=6ze9klYvo50EV7DU-4

Previously, when you called the Toolbox's changeCategories method, the showCategoryTitles property value was set to true automatically. This behavior was useful because the Toolbox could only use category titles to designate categories. Now, the Toolbox can do the same with separators, which makes category titles optional.

To revert to the previous behavior, enable the showCategoryTitles property explicitly after you call the changeCategories method:

toolbox.changeCategories( ... );
toolbox.showCategoryTitles = true;

When adding a Rating item from the design surface, the creator.onItemValueAdded function is fired, however, a newly added item's value and text are not set to custom values.

creator.onItemValueAdded.add((sender, options) => {
        options.newItem.value = 'newItem1';        
        switch (options.propertyName) {
          case 'rateValues' :
            options.newItem.value = "new1";
            options.newItem.text = "Enter Choice";
            break;
            }
        }
    );

Example. https://user-images.githubusercontent.com/22372972/218088611-a1262582-dac8-4e34-b994-963f5512c43a.mp4

I am developing custom widget types as standalone Angular applications (comparable to the principle of micro-frontends) and currently have a working solution, where I bootstrap the Angular module in the custom widget's afterRender hook:

import { CustomWidgetCollection } from 'survey-core';

const type = 'my-custom-type';

@Component{... }
class Widget { ... }

const json = {
  name: type,
  title: type,
  widgetIsLoaded: () => true,
  isFit: (question: Question) => question.getType() === type,
  htmlTemplate: '<div></div>',
  afterRender: async (question: Question, el: HTMLDivElement) => {
    /**
     * Create a new module on the fly to allow us to bootstrap to the root element (div) of the template of this custom question
     */
    @NgModule({
      imports: [BrowserModule, HttpClientModule, ...],
      providers: [...],
    })
    class CustomQuestionModule implements DoBootstrap {
      ngDoBootstrap(appRef: ApplicationRef): void {
        appRef.bootstrap(Widget, el);
      }
    }

    await platformBrowserDynamic().bootstrapModule(CustomQuestionModule);
  },
};

CustomWidgetCollection.Instance.add(json, 'customtype');

My approach is based on the official documentation on creating custom question widgets.

I had to amend my solution however, as bootstrapping multiple Angular applications on a single page results in an error due to the same Angular platform being created multiple times.

I have a workaround where both the custom widgets and my application request the Angular platform as a singleton, but I would like to provide a cleaner solution. I asked this as a general question on StackOverflow and got a response from a SurveyJS team member (thanks for that!). The response indicated I should switch to the new survey-angular-ui library to resolve my problem.

As this library provides native Angular components and no longer relies on Knockout, I decided to make the jump. However I seem to be unable to figure out how to use the AngularComponentFactory to register my custom Angular widget questions. In the code below I simply swapped out the functionality of the after render function and replaced that by registering the component instead directly to the AngularComponentFactory, but alas this does not seem to yield a result:

import { AngularComponentFactory } from 'survey-angular-ui';

const type = 'my-custom-type';

@Component{... }
class Widget { ... }

AngularComponentFactory.Instance.registerComponent(type, Widget)

Browsing through the docs, I found a tutorial on how to integrate third party widgets using React and I am wondering if the docs could be updated to include an Angular example as well?

Many thanks in advance for your time and effort.

• last item's name editing –> enter

• logic. Impossible to select item (milty-select)

• double click doesn't work to select text

• default image name remains after new image's loaded

Bug

Go to the page https://surveyjs.io/form-library/examples/bootstrap-material-theme/jquery and click "Edit in CodeSandbox" button

Tested page URL: https://codesandbox.io/s/gfullq

Test code

SurveyBootstrapMaterial.defaultCss.navigationButton = "btn btn-green";
SurveyBootstrapMaterial.defaultCss.rating.item = "btn btn-default my-rating";

• browser: edge
• browser version: 108.0.1462.76
• surveyjs platform: jquery
• surveyjs version: latest

Bug?

https://www.npmjs.com/package/standard-version

Edit: part of #5316

Original issue: T11856 - onDwonloadFile in cellType: file is correct but not in type: file.

The File question preview is unavailable in the following cases:

• If you predefine survey.data.

  survey.data = {
    "xxxx": [
       {
          "name": "test.jfif",
          "type": "image/jpeg",
          "content": "b7d53698-5066-427b-8fa0-bfa43e85c0d0"
       }
    ]
 } ;

• When a survey's preview is displayed:

export const json = {
  showPreviewBeforeComplete: "showAnsweredQuestions",
  ...
};

Example: https://codesandbox.io/s/musing-zhukovsky-zv2wql?file=/src/SurveyComponent.jsx:263-446. Specify a private API key to test the example.

• we should not focus the search editor at the start

• popup is not close enough to the keyboard sometimes

• popup must not be scrolled

• after selection the keyboard must be hidden

• scrolling of the background

• all of this states are useless for mobile

• Placeholder alignment

• Weird image after photo upload

The bug was reproted on SurveyJS support forum. Here is the link.

issue is referenced to https://github.com/surveyjs/survey-creator/issues/3735

"Add New" button is not shown if there are two panels in panel dynamic and renderMode is different from "list".

New events are added:

  /**
   * An event that is raised on adding a new column in Matrix Dynamic or Matrix Dropdown question.
   * - `sender`: `SurveyModel` - A survey instance that raised the event.
   * - `options.question` - a matrix question.
   * - `options.column` - a new added column.
   */
  public onMatrixColumnAdded: EventBase<SurveyModel> = this.addEvent<SurveyModel>();
  /**
   * An event that is raised on adding a new item in Multiple Text question.
   * - `sender`: `SurveyModel` - A survey instance that raised the event.
   * - `options.question` - a multiple text question.
   * - `options.item` - a new added item.
   */
  public onMultipleTextItemAdded: EventBase<SurveyModel> = this.addEvent<SurveyModel>();

When a user adds another choice item, or matrix row, the creator.onItemValueAdded event is raised. However, no dedicated event is raised when a user adds a Multiple Text question item.

Original issue: T11859 - RadioGroup, checkbox,matrix row columns.

Currently, it is possible to handle a new Multiple Text question item adding as follows:

creator.onPropertyGridSurveyCreated.add((sender, options) => {
    options.survey.onMatrixRowAdded.add((sender, options) => {
      options.question.setRowValue(options.row.index, {
        name: `name${options.row.index}`
      });
    });
});

Here is the JSON example and plunker example.

const json = {
  "elements": [
    {
      name: "q1",
      type: "radiogroup",
      choices: ["yes", "no"]
    },
    {
    "name": "q2",
    "type": "text",
    "requiredIf": "{q1} = 'yes'"
  }]
};

Steps to reproduce: Select "yes" for question "q1" and click "Complete". The error "Response required" will be shown. After that select "no" for question "q1" to make "q2" non requried. We have to clear the error message.

Text question with maskEditor as a custom widget with comma (',') as a decimal delimiter doesn't work correctly, since the value could not be converted into number. SurveyJS should handle string "12,3" as "12.3" on converting it into number.

The onItemValueAdded event is fired on adding new rating item into collection in the property grid, but it is not fired on adding a new item from the survey designer.

If a choice item has text different from the value property then new item on the designer surface should show text and not a value. Here is the related issue on SurveyJS support forum.

SurveyJS Creator doesn't update "Choices from question" property when the corresponsed question name is changed. We should update it accordingly.

Reporting a bug

I want to update Survey Creator from '1.841' to '1.9.71' version for Angular 14v app according to the tutorial form official documentation Add Survey Creator / Form Builder to an Angular Application. Currently, after adding v2 version of Survey Creator to my app, page with it totally freeze after a short a while interaction with Survey Settings panel (from the right side of the screen) if it is represented as below:

Survey Creator v2 properly work with Angular 14.

Also, i see that you use in this example some angular packages from 13 version package.json What the reason of it? Can i use 14v of this?

"@angular-devkit/build-angular": "~13.0.0",
"@angular/cli": "~13.0.0",

You can see that exactly behavior in your example of Survey Creator for Angular Application, presented in sandbox: https://swhfo8.csb.app/

P.S. Getting from SurveyJS-Angular example project

Tested page URL: https://swhfo8.csb.app/

Test code: https://codesandbox.io/s/swhfo8

• browser: Chrome
• editor version:

A Multiple-Choice Matrix has the "detailPanelMode": "underRow", but no detail controls. PDF output contains misaligned texts: Example.

bug

I noticed the build css files contain quite a few font-family declarations, instead of using var(--font-family). In the newer version even more than before. This makes it hard to change the font-family consistently.

for example in https://unpkg.com/survey-core@1.9.68/defaultV2.fontless.css

.sv-popup__button {
  padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
  background: var(--background, #fff);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin: 2px;
  cursor: pointer;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: calc(2 * var(--base-unit, 8px));
  line-height: calc(3 * var(--base-unit, 8px));
  text-align: center;
  color: var(--primary, #19b394);
  border: none;
  outline: none;
}

var(--font-family) is used consitently as a value, so it can be changed via setting of a css variable in one place (one selector)

When the Single-Choice Matrix doesn't have any rows in its Rows collection, it should not display any row. However, by default, the matrix displays a single default row:

{
     "type": "matrix",
     "name": "question1",
     "columns": [
      "Column 1",
      "Column 2",
      "Column 3"
     ]
 }

Example.

Original issue: T11755 - Matrix questions without rows.

Feature

choicesFromQuestion seems not to work in a composite question. The goal is to have 1 composite question with 2 elements. The first question in the composite is multiple choice and the second question is a single choices with options from the first.

choicesFromQuestion should work with the notation composite.abc.

Survey.ComponentCollection.Instance.add({
    iconName: 'icon-language',
    name: 'platformlanguagepicker',
    title: 'Platform language picker',
    elementsJSON: [
        {
          name: 'languages',
          type: 'checkbox',
          title: 'Languages for this project',
          choices: localeChoices
        },
        {
          name: 'defaultlanguage',
          type: 'dropdown',
          title: 'Primary language for this project',
          choicesFromQuestion: 'composite.languages',
          choicesFromQuestionMode: "selected"
        }
    ],
    onInit () {
      console.log('oninit');
      // debugger;
    },

  });

Duplicate choices for both questions, use choicesVisibleIf to hide unselected choices.

It will work in the following way:

1. Array1 + Array2 will create return Array1.contact(Array2)
2. Array1 + val_string_type will return string Array1.json(", ") + val_String_type
3. Array1 + val_number will return number + val_number.

Allow to summarise Checkbox values with other quesion values / string literals in expressions.