Godofbrowser/vuejs-dialog

Default button

alenck opened this issue · 5 comments

Can i change default button?
So now OK is default, how can i change it to cancel as default button.

Sorry, I didn't get what you meant by default button.

The button focused by default? The button focused by default is the ok button unless in situations where there's just one button (alert), then the OK button serves all purpose.

The plugin also allows you to reverse the order in which the buttons appear. That way you can have the OK button on the left instead.

reversetrue
reversetrue

On both cases default or focus button is OK.
So clicking enter would confirm the dialog, but i want cancel to be focused.

Okay, I get that now. There's currently no option to personalize which action is default. Will add that in my spare time.

Meanwhile, i don't think keyboard users will want to close a dialog with the enter key. Usually escape key closes, enter key proceeds.

tgice commented

I have a concern about this issue too. I always like to keep as much keyboard functionality as I can for my apps, since I prefer using the keyboard in data-entry roles, etc.

Unless I'm doing something wrong in my tests, no button is focused by default, and neither the enter nor space bar keys will activate either the OK or cancel button.

It seems like your buttons don't take focus like default HTML ones (or Bootstrap-styled ones [e.g.]) do.

I'd like the user to be able to clearly see which button is currently focused and be able to press enter or spacebar, just as the default browser alert or confirm functions do.

Any chance for (optional, by default off to preserve backwards compatibility) support of this?

Thanks for sharing your component. I like it.

Hello @tgice , i get your point. The buttons are missing visual indicators to tell which one is currently active. Something like dotted borders right? I think it was removed initially as defaces the plugin.

Now that this is a concern, i think i'll have to work something visually appealing.

Currently, the escape key closes the dialog and enter key proceeds.

Two things missing includes the ability to set which button get's focuses initially and the visual indicator for the active button.

In my spare time, i'll fix them. The dialog is open to pull requests though.

In the mean time, i think a little bit of css will add visual indicators. Something like button::active, button::focus { border: 1px dotted grey;}

Custom functionalities like the "default focus" can also be achieved using custom components. Pending the time it'll be imlemented. Just copy the default component and build on it