mirror of
https://github.com/discourse/discourse.git
synced 2025-02-06 11:41:41 +08:00
DEV: allows d-menu to refocus trigger (#30522)
This commit is contained in:
parent
e04af92740
commit
a5ba788a23
|
@ -64,7 +64,7 @@ export default class NotificationsTracking extends Component {
|
||||||
|
|
||||||
@action
|
@action
|
||||||
async setNotificationLevel(level) {
|
async setNotificationLevel(level) {
|
||||||
await this.dmenuApi.close();
|
await this.dmenuApi.close({ focusTrigger: true });
|
||||||
this.args.onChange?.(level);
|
this.args.onChange?.(level);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -350,4 +350,43 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
|
||||||
assert.dom(".fk-d-menu__trigger.first").doesNotExist();
|
assert.dom(".fk-d-menu__trigger.first").doesNotExist();
|
||||||
assert.dom(".fk-d-menu.first").exists();
|
assert.dom(".fk-d-menu.first").exists();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("focusTrigger on close", async function (assert) {
|
||||||
|
this.api = null;
|
||||||
|
this.onRegisterApi = (api) => (this.api = api);
|
||||||
|
this.close = async () => await this.api.close();
|
||||||
|
|
||||||
|
await render(
|
||||||
|
hbs`<DMenu @onRegisterApi={{this.onRegisterApi}} @inline={{true}} @icon="xmark">
|
||||||
|
<DButton @icon="xmark" class="close" @action={{this.close}} />
|
||||||
|
</DMenu>`
|
||||||
|
);
|
||||||
|
|
||||||
|
await click(".fk-d-menu__trigger");
|
||||||
|
await triggerKeyEvent(document.activeElement, "keydown", "Tab");
|
||||||
|
await triggerKeyEvent(document.activeElement, "keydown", "Enter");
|
||||||
|
|
||||||
|
assert.strictEqual(
|
||||||
|
document.activeElement,
|
||||||
|
document.querySelector(".fk-d-menu__trigger")
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("focusTrigger=false on close", async function (assert) {
|
||||||
|
this.api = null;
|
||||||
|
this.onRegisterApi = (api) => (this.api = api);
|
||||||
|
this.close = async () => await this.api.close({ focusTrigger: false });
|
||||||
|
|
||||||
|
await render(
|
||||||
|
hbs`<DMenu @onRegisterApi={{this.onRegisterApi}} @inline={{true}} @icon="xmark">
|
||||||
|
<DButton @icon="xmark" class="close" @action={{this.close}} />
|
||||||
|
</DMenu>`
|
||||||
|
);
|
||||||
|
|
||||||
|
await click(".fk-d-menu__trigger");
|
||||||
|
await triggerKeyEvent(document.activeElement, "keydown", "Tab");
|
||||||
|
await triggerKeyEvent(document.activeElement, "keydown", "Enter");
|
||||||
|
|
||||||
|
assert.strictEqual(document.activeElement, document.body);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import Component from "@glimmer/component";
|
import Component from "@glimmer/component";
|
||||||
import { concat, hash } from "@ember/helper";
|
import { concat, fn, hash } from "@ember/helper";
|
||||||
import { htmlSafe } from "@ember/template";
|
import { htmlSafe } from "@ember/template";
|
||||||
import { modifier as modifierFn } from "ember-modifier";
|
import { modifier as modifierFn } from "ember-modifier";
|
||||||
import concatClass from "discourse/helpers/concat-class";
|
import concatClass from "discourse/helpers/concat-class";
|
||||||
|
@ -70,7 +70,9 @@ export default class DFloatBody extends Component {
|
||||||
{{(if
|
{{(if
|
||||||
this.supportsCloseOnClickOutside
|
this.supportsCloseOnClickOutside
|
||||||
(modifier
|
(modifier
|
||||||
closeOnClickOutside @instance.close (hash target=this.content)
|
closeOnClickOutside
|
||||||
|
(fn @instance.close (hash focusTrigger=false))
|
||||||
|
(hash target=this.content)
|
||||||
)
|
)
|
||||||
)}}
|
)}}
|
||||||
{{(if
|
{{(if
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { on } from "@ember/modifier";
|
||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
import { getOwner } from "@ember/owner";
|
import { getOwner } from "@ember/owner";
|
||||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||||
|
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
|
||||||
import { service } from "@ember/service";
|
import { service } from "@ember/service";
|
||||||
import { modifier } from "ember-modifier";
|
import { modifier } from "ember-modifier";
|
||||||
import { and } from "truth-helpers";
|
import { and } from "truth-helpers";
|
||||||
|
@ -39,6 +40,11 @@ export default class DMenu extends Component {
|
||||||
this.body = element;
|
this.body = element;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
teardownFloatBody() {
|
||||||
|
this.body = null;
|
||||||
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
forwardTabToContent(event) {
|
forwardTabToContent(event) {
|
||||||
if (!this.body) {
|
if (!this.body) {
|
||||||
|
@ -151,6 +157,7 @@ export default class DMenu extends Component {
|
||||||
@role="dialog"
|
@role="dialog"
|
||||||
@inline={{this.options.inline}}
|
@inline={{this.options.inline}}
|
||||||
{{didInsert this.registerFloatBody}}
|
{{didInsert this.registerFloatBody}}
|
||||||
|
{{willDestroy this.teardownFloatBody}}
|
||||||
>
|
>
|
||||||
{{#if (has-block)}}
|
{{#if (has-block)}}
|
||||||
{{yield this.componentArgs}}
|
{{yield this.componentArgs}}
|
||||||
|
|
|
@ -54,7 +54,7 @@ export default class DMenuInstance extends FloatKitInstance {
|
||||||
}
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
async close() {
|
async close(options = { focusTrigger: true }) {
|
||||||
if (getOwner(this).isDestroying) {
|
if (getOwner(this).isDestroying) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -66,6 +66,10 @@ export default class DMenuInstance extends FloatKitInstance {
|
||||||
}
|
}
|
||||||
|
|
||||||
await this.menu.close(this);
|
await this.menu.close(this);
|
||||||
|
|
||||||
|
if (options.focusTrigger) {
|
||||||
|
this.trigger?.focus?.();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
|
|
Loading…
Reference in New Issue
Block a user