Some issues with Combo box

[k-jay-c]

I'm creating a combo box with options provider. I am hitting the following issues:

						{
							id: "pythonModule",
							label: "Python Module",
							description: "If Python Module is required, please select name of python module",
							type: "combo",
							initialValue: "Create New",
							optionProvider: ():string[] => {
								const ret: string[] = [];
								mods.push('Create New');
								mods.forEach((val) =>{
									ret.push(val);
								});
								
								return [... new Set(ret)];
							}
						},

1. "Create New" values are being added again and again (possibly due to validations). To get around the issue for now, I'm returning a set to remove duplicates (see above)

2. I'm setting the initial value to "Create New", when the wizard loads, I do not see the other options in the combo, unless I delete, please see the below screen shots:

3. If you see the above screen shot, the combo box drop down is not positioned below the combo. Not sure if this is by design or a bug.

Thanks,
Jay.

[Rob Stryker]

Hi Jay:

For your first issue, I can't see where mods is stored. Because of this, I can't know what's going on with it. What I can tell you is that your optionProvider function should just make sure it's returning the array as it should be displayed as options. An example such as below will be guaranteed to work:

                    optionProvider: (parameters:any) => {
                        let ret = [];
                        // pull from a model
                        ret.push("Perl");
                        ret.push("Java");
                        ret.push("Brainfuck");
                        return ret;
                    }

If your array is gaining duplicates, I encourage you to look into how or where they're coming from in your own model. Clearly a simpler model like the one I demonstrate above won't suffer from this issue. So, sorry to say, but this one's kinda on you to manage.

For your second issue, we have two different combo-like controls. One is a combo, the other is a select. The nature of a combo is that you can type in it. When you type in it, the options below it are filtered by what you have typed. The input is actually a text object with a datalist below it. You can see an example of its behavior here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

The select model, in contrast, does not allow you to type in the field.

I'd be really interested to see a larger sample of your code so that I can discover a solution to teh problem, though. I think your usecase is not a rare one, and we should work to making it easy for tool writers to get what they want here.

Finally, what version are you using of the extension? That may help me narrow down what's happening with the combo being in the wrong location.

[Rob Stryker]

I'm very curious how your create-new is actually working. Are you pressing 'finish' or something? Or are you adding a button for people to click to add the new item?

It's always interesting to see how people are using your code in new and exciting ways, but, sometimes we find our users had different assumptions than we did.

[k-jay-c]

Hi,

Sorry for the delay, been a bit busy today, I will try and recreate the issue in a small package that I can share with you tomorrow.

Thanks,
Jay.

[k-jay-c]

vscode-wizard-example-kjay.zip
Hi @robstryker,

Please see the attached file. Its an updated version of the vscode-wizard-example you have and I've added a new command "Issue 73 and 74 reproduction" - this will bring up the wizard.

To reproduce the issues, do the following:

1. Launch the wizard by executing the command
2. Enter a service point ID
3. check the "Python Module" combo box and number of entries of "Create New"
4. uncheck "Add Python Module" and then recheck the tick box.
5. check the "Python Module" combo box again, notice number of entries have now increased
6. Hopefully the combo box is also appearing slightly different position.

A few other points to note:

• I'm developing this on a Mac, not sure if this has any significance but it's worth mentioning
• I've updated the package.json and tsconfig.json with version numbers matching what I have in my dev environment

If you have any other questions, please let me know.

Regards,
Jay.

[Rob Stryker]

Found your error.

							optionProvider: ():string[] => {
								const ret: string[] = [];
								pymods.push('Create New');
								pymods.forEach((val) =>{
									ret.push(val);
								});
								return ret;
								//return [... new Set(ret)];
							}

You are adding Create New to the pymods array, which should not be changed here. In reality, you should change the following lines:

Remove:               pymods.push('Create New');
Replace With:       ret.push('Create New');

[Rob Stryker]

Sadly, I'm not able to replicate the combo box moving. I wonder if this is an issue for mac or something else.

I'd suggest switching your dependencies to:

    "dependencies": {
        "@redhat-developer/vscode-wizard": "0.2.18"
    },

and then let me know if it's still occurring.

[k-jay-c]

Found your error.

							optionProvider: ():string[] => {
								const ret: string[] = [];
								pymods.push('Create New');
								pymods.forEach((val) =>{
									ret.push(val);
								});
								return ret;
								//return [... new Set(ret)];
							}

You are adding Create New to the pymods array, which should not be changed here. In reality, you should change the following lines:

Remove:               pymods.push('Create New');
Replace With:       ret.push('Create New');

@robstryker Thanks!! Letting that slip through the net is a crime needing severe punishment!

With regards to the position of Combo box, I will try and run this on a non mac machine at some point in the near future and will let you know how I get on.

Finally, I have couple of questions, and I can create a new issues if it helps -

1. The current design has some fields being disabled, and they'll be enabled if "Create New" is selected. Is there any plan on being able to hide certain fields (or sections) and given a certain condition - e.g. check box ticked etc, those fields/sections become visible.
2. Is it possible to have a multi-select list? Usecase here could be including a list of standard libraries in your project. Possible solutions include the ability to select several items in the list or, having 2 lists side-by-side (left list and right list) and be able to move the available items (left list) into an import list (right list)
3. Any thoughts on a dynamic looping in the workflow - e.g. if you have a check box that says, "Add New Page", the next page also has the a check box that allows user to select "Add Another" and each time that is selected and you click on "Next" Button, the same page appears again allowing fresh user input, the data can be stored in some kind of array for processing afterwards.

Thanks,
Jay.

[Rob Stryker]

1. Your validator's return object, which currently can enable or disable fields, can also hide them. I believe the key is 'visible'. So that's alreayd there.

2. Right now we don't have multi-select lists. We don't have anything against them, so add an issue for it.

3. Hrmmm... we never really considered that option. I guess make an issue but this one would probably need a lot more thought to get it right.

[k-jay-c]

Thank you @robstryker .

I will create new issues for 2 and 3. Happy for this issue to be closed.