ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-04 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

restore focus on escape (#13285)

Browse Source 
* restore focus on escape

* obtain focus on action click

* comment

* comment 2

* simplify the implementation

* remove the toggle action completely

* remove the import

* implement aria requirements
This commit is contained in:
Alan Ren
2020-11-10 11:31:53 -08:00
committed by GitHub
parent fbe8e9d9f3
commit e076062d4f
1 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/sql/base/parts/editableDropdown/browser/dropdown.ts
View File

@@ -5,7 +5,6 @@
import 'vs/css!./media/dropdownList';
import { ToggleDropdownAction } from './actions';
import { DropdownDataSource, DropdownFilter, DropdownModel, DropdownRenderer, DropdownController } from './dropdownTree';
import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
@@ -82,7 +81,6 @@ export class Dropdown extends Disposable {
private _input: InputBox;
private _tree: ITree;
private _options: IDropdownOptions;
private _toggleAction: ToggleDropdownAction;
private _dataSource = new DropdownDataSource();
private _filter = new DropdownFilter();
private _renderer = new DropdownRenderer();
@@ -114,16 +112,10 @@ export class Dropdown extends Disposable {
this._el = DOM.append(container, DOM.$('.monaco-dropdown'));
this._el.style.width = '100%';
this._inputContainer = DOM.append(this._el, DOM.$('.dropdown-input'));
this._inputContainer = DOM.append(this._el, DOM.$('.dropdown-input.select-container'));
this._inputContainer.style.width = '100%';
this._treeContainer = DOM.$('.dropdown-tree');
this._toggleAction = new ToggleDropdownAction(() => {
this._showList();
this._tree.domFocus();
this._tree.focusFirst();
}, this._options.actionLabel);
this._input = new InputBox(this._inputContainer, contextViewService, {
validationOptions: {
// @SQLTODO
@@ -131,7 +123,6 @@ export class Dropdown extends Disposable {
validation: v => this._inputValidator(v)
},
placeholder: this._options.placeholder,
actions: [this._toggleAction],
ariaLabel: this._options.ariaLabel
});
@@ -139,6 +130,8 @@ export class Dropdown extends Disposable {
// in the text box - we already have tooltips for each item in the dropdown itself.
this._input.inputElement.title = '';
this._inputContainer.setAttribute('role', 'combobox');
this._register(DOM.addDisposableListener(this._input.inputElement, DOM.EventType.CLICK, () => {
this._showList();
}));
@@ -162,14 +155,14 @@ export class Dropdown extends Disposable {
if (this._treeContainer.parentElement) {
this._input.validate();
this._onBlur.fire();
this.contextViewService.hideContextView();
this._hideList();
e.stopPropagation();
}
break;
case KeyCode.Tab:
this._input.validate();
this._onBlur.fire();
this.contextViewService.hideContextView();
this._hideList();
e.stopPropagation();
break;
case KeyCode.DownArrow:
@@ -205,12 +198,15 @@ export class Dropdown extends Disposable {
this.value = e.value;
this._onValueChange.fire(e.value);
this._input.focus();
this.contextViewService.hideContextView();
this._hideList();
});
this._controller.onDropdownEscape(() => {
this._input.focus();
this.contextViewService.hideContextView();
this._hideList();
// have to put this in the setTimeout to make sure the focus can be set properly when the context menu is opened by pressing the DownArrow key
setTimeout(() => {
this._input.focus();
}, 0);
});
this._input.onDidChange(e => {
@@ -225,7 +221,7 @@ export class Dropdown extends Disposable {
});
this.onBlur(() => {
this.contextViewService.hideContextView();
this._hideList();
this._input.validate();
});
@@ -235,6 +231,7 @@ export class Dropdown extends Disposable {
private _showList(): void {
if (this._input.isEnabled()) {
this._inputContainer.setAttribute('aria-expanded', 'true');
this._onFocus.fire();
this._filter.filterString = '';
this.contextViewService.showContextView({
@@ -250,10 +247,15 @@ export class Dropdown extends Disposable {
}
};
}
});
}, this._inputContainer);
}
}
private _hideList(): void {
this.contextViewService.hideContextView();
this._inputContainer.setAttribute('aria-expanded', 'false');
}
private _layoutTree(): void {
if (this._dataSource && this._dataSource.options && this._dataSource.options.length > 0) {
let filteredLength = this._dataSource.options.reduce((p, i) => {
@@ -320,7 +322,7 @@ export class Dropdown extends Disposable {
public blur() {
this._input.blur();
this.contextViewService.hideContextView();
this._hideList();
}
style(style: IListStyles & IInputBoxStyles & IDropdownStyles) {
@@ -350,7 +352,6 @@ export class Dropdown extends Disposable {
public set enabled(val: boolean) {
this._input.setEnabled(val);
this._toggleAction.enabled = val;
}
public get enabled(): boolean {