chore(react): bring back focus to add_link

This commit is contained in:
Elian Doran 2025-08-04 16:05:04 +03:00
parent c89737ae7b
commit a9c25b4edd
No known key found for this signature in database
2 changed files with 26 additions and 6 deletions

View File

@ -6,10 +6,10 @@ import ReactBasicWidget from "../react/ReactBasicWidget";
import Button from "../react/Button";
import FormRadioGroup from "../react/FormRadioGroup";
import NoteAutocomplete from "../react/NoteAutocomplete";
import { useState } from "preact/hooks";
import { useRef, useState } from "preact/hooks";
import tree from "../../services/tree";
import { useEffect } from "react";
import { Suggestion } from "../../services/note_autocomplete";
import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
import type { default as TextTypeWidget } from "../type_widgets/editable_text.js";
import { logError } from "../../services/ws";
@ -58,6 +58,20 @@ function AddLinkDialogComponent({ text: _text, textTypeWidget }: AddLinkDialogPr
}
}, [suggestion]);
function onShown() {
const $autocompleteEl = $(autocompleteRef.current);
if (!text) {
note_autocomplete.showRecentNotes($autocompleteEl);
} else {
note_autocomplete.setText($autocompleteEl, text);
}
// to be able to quickly remove entered text
$autocompleteEl
.trigger("focus")
.trigger("select");
}
function onSubmit() {
if (suggestion.notePath) {
// Handle note link
@ -72,6 +86,8 @@ function AddLinkDialogComponent({ text: _text, textTypeWidget }: AddLinkDialogPr
}
}
const autocompleteRef = useRef<HTMLInputElement>(null);
return (
<Modal
className="add-link-dialog"
@ -81,12 +97,14 @@ function AddLinkDialogComponent({ text: _text, textTypeWidget }: AddLinkDialogPr
helpPageId="QEAPj01N5f7w"
footer={<Button text={t("add_link.button_add_link")} keyboardShortcut="Enter" />}
onSubmit={onSubmit}
onShown={onShown}
onHidden={() => setSuggestion(null)}
>
<div className="form-group">
<label htmlFor="add-link-note-autocomplete">{t("add_link.note")}</label>
<NoteAutocomplete
inputRef={autocompleteRef}
text={text}
allowExternalLinks
allowCreatingNotes

View File

@ -1,17 +1,19 @@
import { useRef } from "preact/hooks";
import { t } from "../../services/i18n";
import { use, useEffect } from "react";
import { useEffect } from "react";
import note_autocomplete, { type Suggestion } from "../../services/note_autocomplete";
import type { RefObject } from "preact";
interface NoteAutocompleteProps {
inputRef?: RefObject<HTMLInputElement>;
text?: string;
allowExternalLinks?: boolean;
allowCreatingNotes?: boolean;
onChange?: (suggestion: Suggestion) => void;
}
export default function NoteAutocomplete({ text, allowCreatingNotes, allowExternalLinks, onChange }: NoteAutocompleteProps) {
const ref = useRef<HTMLInputElement>(null);
export default function NoteAutocomplete({ inputRef: _ref, text, allowCreatingNotes, allowExternalLinks, onChange }: NoteAutocompleteProps) {
const ref = _ref ?? useRef<HTMLInputElement>(null);
useEffect(() => {
if (!ref.current) return;