vitmalina / w2ui

UI widgets for modern apps. Data table, forms, toolbars, sidebar, tabs, tooltips, popups. All under 120kb (gzipped).
http://w2ui.com
MIT License
2.64k stars 730 forks source link

Close w2Confirm with Enter #2425

Closed blitz-research closed 1 year ago

blitz-research commented 1 year ago

Hi, is there some way to close a w2Confirm dialog using the Enter key to select 'Ok'? It looks like 'Esc' already selects 'Cancel', but Enter doesn't do anything and you need to manually click 'Ok'.

See the w2Confirm example here:

https://w2ui.com/web/demos/#/popup/7

WenSheng-tw commented 1 year ago

The method can solution your question!!

let popupBtnFocus=function(){ $('#w2ui-popup .w2ui-popup-buttons .w2ui-btn:last-child').focus(); }; w2confirm('Delete it?', 'Note!!').then(function(){popupBtnFocus();});

vitmalina commented 1 year ago

Currently you can use tab key, once confirm is open, and navigate to Yes button and click enter (or spacebar). I do not think it is a good idea to make such behaviour default because users will auto click enter in many case. You can also move focus to Yes buttton, once it is opened, then it will work as you desire

w2confirm('message')
        .then(() => { query('#w2ui-popup button').get(0).focus() })
        .yes(() => { console.log('yes') })
        .no(() => { console.log('no') })
}