Some UI components unresponsive

[jurev]

I noticed that some UI components, like Dropdrown and Calendar, use a small timeout before closing dropdown values or calendar popup, which makes user experience feeling a bit slow/unresponsive. If a form has several dropdowns, and user wants to select them fast one after another he has to wait 200 miliseconds until the selected dropdown closes.

In the source code for Dropdown component I noticed that delay before closing the overlday is hard coded (setTimeOut). I think this delay should be eliminated, because it feels like we use the form on some old unresponsive computers or the code is very slow. At least some global delay parameter should be supported to configure this.

https://github.com/primefaces/primevue/ ... opdown.vue

Code: Select all

        onOptionSelect(event, option) {
            let value = this.getOptionValue(option);
            this.updateModel(event, value);
            this.$refs.focusInput.focus();
            setTimeout(() => {
                this.hide();
            }, 200);
        },

Is this timeout for some technical purposes (to make sure all other events are finished, not to cause any errors), or is this just for user experience purposes? In the latter case can we safely solve my problem by calling dropdown.hide() on dropdown's change event or somewhere else?

Also transition CSS animations that occur when opening and closing overlays (dropdown options) slow down UI experience a bit, but at least they can be disabled by overriding some CSS, eg:

Code: Select all

.p-connected-overlay { transition: none!important; }

At the first impression all those animations may look fancy but they are not so welcoming for serious business web applications with complex forms that need to be as responsive as possible.