UX: focus conversation input on route transition and button click (#1404)

This commit is contained in:
Kris 2025-06-13 17:45:51 -04:00 committed by GitHub
parent b5e8277083
commit 24416c5b87
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 2 deletions

View File

@ -5,6 +5,7 @@ import { on } from "@ember/modifier";
import { action } from "@ember/object";
import { getOwner } from "@ember/owner";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import { scheduleOnce } from "@ember/runloop";
import { service } from "@ember/service";
import { TrackedArray } from "@ember-compat/tracked-built-ins";
import $ from "jquery";
@ -164,6 +165,12 @@ export default class AiBotConversations extends Component {
setTextArea(element) {
this.textarea = element;
this.setupAutocomplete(element);
scheduleOnce("afterRender", this, this.focusTextarea);
}
@action
focusTextarea() {
this.textarea?.focus();
}
@action
@ -199,7 +206,7 @@ export default class AiBotConversations extends Component {
transformComplete: (obj) => obj.username || obj.name,
afterComplete: (text) => {
this.textarea.value = text;
this.textarea.focus();
this.focusTextarea();
this.updateInputValue({ target: { value: text } });
},
onClose: destroyUserStatuses,
@ -216,7 +223,7 @@ export default class AiBotConversations extends Component {
treatAsTextarea: true,
afterComplete: (text) => {
this.textarea.value = text;
this.textarea.focus();
this.focusTextarea();
this.updateInputValue({ target: { value: text } });
},
});

View File

@ -4,6 +4,8 @@ import { service } from "@ember/service";
import DButton from "discourse/components/d-button";
import { AI_CONVERSATIONS_PANEL } from "../services/ai-conversations-sidebar-manager";
const TEXTAREA_ID = "ai-bot-conversations-input";
export default class AiBotSidebarNewConversation extends Component {
@service appEvents;
@service router;
@ -13,13 +15,21 @@ export default class AiBotSidebarNewConversation extends Component {
return this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL);
}
@action
focusTextarea() {
document.getElementById(TEXTAREA_ID)?.focus();
}
@action
routeTo() {
this.appEvents.trigger("discourse-ai:new-conversation-btn-clicked");
if (this.router.currentRouteName !== "discourse-ai-bot-conversations") {
this.router.transitionTo("/discourse-ai/ai-bot/conversations");
} else {
this.focusTextarea();
}
this.args.outletArgs?.toggleNavigationMenu?.();
}