drop down data not found custom link

Vee

created 11 days ago

Hi surveyjs team,
I am trying to customise the dropdown to add an item to the list if item does not exist only on filtered choices, so the dropdown will only open when the user is typing a value that matches the choices.
I have appended on th list add new item and when the user clicks it the i am changing the hasOther from false to true.

now when i try to do the same when the .sv-list__empty-container appears, the link doesn't have the time to action because onblur acts faster.

is there anyway to prevent that?

here is a sample of the code
`survey.onAfterRenderQuestion.add(function (sender, options) {
options.question.onOpened.add(() => {
const newItemLinka = popupdrop.querySelector('.sv-list__empty-container');
newItemLinka.innerHTML = "<a href=#> add item</a>"

options.question.hasOther = true;
options.question.otherText = "Add a new company";
options.question.value = "other";

}
}

Thank you in advance
Vee

Comments (2)

Jane 11 days ago

Hello Vee,
Thank you for reaching out to us.
From what I gather, you wish to allow respondents to append custom choices and add them to the drop-down list. Please refer to the following demo: View CodeSandbox. It shows how to use the React-Creatable component which allows users to create new choices. Please let me know if this is the desired functionality.

Vee 10 days ago

Hi Jane,
yes this is fantastic <3!
the only problem is that this is registered for all dropboxes and i am trying to use it to a specific one with a custom property:
addItem: true or something like that

is that possible?
Thank you
Vee ^__^

Answers approved by surveyjs Support

Jane

created 10 days ago

Hi Vee,
You're always welcome. In the above demo, we enable this custom feature for all Dropdown questions by overriding the default value for the renderAs property. If you wish to enable this option for specific questions, you may wish to introduce a custom Boolean property. Implement its onSetValue function to specify the renderAs property for a Dropdown.

JavaScript
import { Serializer } from "survey-core";

Serializer.addProperty("dropdown", {
  name: "addItem",
  type: "boolean",
  onSetValue: (surveyElement, value) => {
    surveyElement.setPropertyValue("addItem", value);
    if (value) {      
      surveyElement.renderAs = "dropdown-react";
    } else {
      surveyElement.renderAs = "default";
    }
  },
});

View Demo

I hope this information helps. Please take note that we're currently working on supporting this feature for our Dropdown out of the box. Please keep an eye on our release notes to not miss anything.

Show previous comments (2)

Jane 9 days ago

Hi Vee,
Please share the relevant code or a sample demo for research.

Thank you

Vee 7 days ago

Hi Jane,
yes here is the code

Code
class CustomSelect extends SurveyQuestionDropdown {
    constructor(props) {
        super(props);
    }
    get options() {
        return this.question.visibleChoices.map((c) => {
            return { value: c.value, label: c.value };
        });
    }
    get selectedOption() {
        return this.options.filter((o) => o.value == this.question.value);
    }
    onSelectChange = (selectedOption) => {
        this.setValueCore(selectedOption.value);
    };
    onCreateOption = (inputValue) => {
        if (!inputValue.trim()) return;

        // Check if value already exists
        const exists = this.question.choices.some(
            (choice) => choice.value === inputValue
        );
        if (!exists) {
            this.question.choices.push(
                new ItemValue({ value: inputValue, text: inputValue })
            );
        }

        this.setValueCore(inputValue);
    };
    renderElement() {
        if (this.isDisplayMode) {
            return (
                <div
                    id={this.question.inputId}
                    className={this.question.getControlClass()}
                    disabled
                >
                    {this.question.displayValue || this.question.placeholder}
                </div>
            );
        }
        return (
            <Creatable
                id={this.question.inputId}
                value={this.selectedOption}
                onChange={this.onSelectChange}
                onCreateOption={this.onCreateOption}
                options={this.options}
                required={this.question.isRequired}
                menuPortalTarget={document.body}
            />
        );
    }
}

const SurveyForm = forwardRef((props, ref) => {

    const surveyJson = {
        showNavigationButtons: false,

        name: "demographics",
        elements: [
            {
                "type": "dropdown",
                "name": "company",
                "title": "Company with add item",
                "choices": [
                    { "value": "Coop", "text": "Coop" },
                    { "value": "Tesco", "text": "Tesco" },
                    { "value": "Tesco Express", "text": "Tesco Express" },
                    { "value": "Tesco Insurance", "text": "Tesco Insurance" },
                    { "value": "Waitrose", "text": "Waitrose" },

                ],

                addItem: true,

            },

           // the second dropdown should have the surveyjs default dropdown but it doesn't
            {
                "type": "dropdown",
                "name": "education",
                "title": "Education",
                "choices": [
                  { value: "high-school", text: "High School" },
                  { value: "associate-degree", text: "Associate Degree" },
                  { value: "bachelor", text: "Bachelor’s Degree" },
                  { value: "master", text: "Master’s Degree" },
                 { value: "phd", text: "PhD" },
                ], 

            },
                ],
    showCompletedPage: false,
    showQuestionNumbers: "off",
    questionErrorLocation: "bottom",

};

const surveyModel = useRef(new Model(surveyJson)); // SurveyJS model initialization

    const survey = surveyModel.current;

useImperativeHandle(ref, () => ({
        validateSurvey: () => surveyModel.current.validate(),
        getSurveyData: () => surveyModel.current.data,
    }));

    return <Survey model={surveyModel.current} />;
});

Thank you in advance
Vee

Jane 7 days ago

Hi Vee,
Unfortunately, it seems that the code doesn't contain the function which registers your custom CustomSelect question renderer. It don't also see the code which registers a custom addItem property.

To implement a custom question renderer, you're expected to use the following code:

JavaScript
// Register the CustomSelect component as a renderer under a custom name "sv-dropdown-react"
ReactQuestionFactory.Instance.registerQuestion("sv-dropdown-react", (props) => {
  return React.createElement(CustomSelect, props);
});

// Register "sv-dropdown-react" as a renderer for questions whose `type` is "dropdown" and `renderAs` property is "dropdown-react"
RendererFactory.Instance.registerRenderer(
  "dropdown",
  "dropdown-react",
  "sv-dropdown-react"
);

Once you register a custom question renderer, you would be able to toggle the renderAs setting for dropdown questions using the addItem property. Please research the demo I shared earlier: View Demo.

Thank you

drop down data not found custom link

Answers approved by surveyjs Support

Other Answers

Recently viewed tickets