Multi Select Drop down, overlay with CTA buttons

Question

Have a multi-select dropdown - which on expand is overlaying the CTA buttons on the form. I have to click elsewhere for the dropdown to close, (since it a multi-select dropdown the general behavior of close panel when an option is selected will not apply) and then click on CTA. I can't change the position of CTA also. Recommendations, please

image attached.

Answer 1

I have the following feedback for you:

1. You can drop it up instead of down if you have fewer options and enough space above your inputs.

2. You should not use a checkbox inside the select option like that instead, you can show the currently selected options by the user with an 'x' button on them.

3. Since I don't know the whole case and user interface that you have made I would recommend that if you can make sure that on clicking in the background ( when select is not in focus ), the menu is getting closed.

Thank you, Let me know if you think this answer could be made better.

Answer 2

Since you want the CTA buttons not moved, best way to imagine as an alternative solution is to reverse the arrow on the right-corner of the dropdowns in my point of view.

While you may have them pointing out downwards as usual when they're closed, you may have the arrows pointing upwards when the multi select dropdown's options revealed as above. By allowing user to click that arrow, it lets the dropdown collapse so that, your users freely complete the desired action within your forms via CTA buttons.

You should also think about applying animations during these transitioning (opening/collapsing) cycles.

Answer 3

Sidenote: In addition to the response of @user88702,

Checkboxes are necessary at a point when you search for something and want to select multiple things in one go! This should be checked against the user behavior pattern in your product