Close web mention suggestions popup on Escape (#8605)

* alf web typeahead

* fix type error

* fix escape behaviour

* change selection on hover

* rm React.

* undo random change
This commit is contained in:
Samuel Newman
2025-08-29 03:03:12 +03:00
committed by GitHub
parent 27c1058568
commit 8a4398608a
5 changed files with 251 additions and 271 deletions
+18 -39
View File
@@ -1,7 +1,6 @@
import React, {
type ComponentProps,
forwardRef,
import {
useCallback,
useImperativeHandle,
useMemo,
useRef,
useState,
@@ -9,7 +8,6 @@ import React, {
import {
type NativeSyntheticEvent,
Text as RNText,
type TextInput as RNTextInput,
type TextInputSelectionChangeEventData,
View,
} from 'react-native'
@@ -33,57 +31,38 @@ import {
import {atoms as a, useAlf} from '#/alf'
import {normalizeTextStyles} from '#/alf/typography'
import {Autocomplete} from './mobile/Autocomplete'
export interface TextInputRef {
focus: () => void
blur: () => void
getCursorPosition: () => DOMRect | undefined
}
interface TextInputProps extends ComponentProps<typeof RNTextInput> {
richtext: RichText
placeholder: string
webForceMinHeight: boolean
hasRightPadding: boolean
isActive: boolean
setRichText: (v: RichText) => void
onPhotoPasted: (uri: string) => void
onPressPublish: (richtext: RichText) => void
onNewLink: (uri: string) => void
onError: (err: string) => void
}
import {type TextInputProps} from './TextInput.types'
interface Selection {
start: number
end: number
}
export const TextInput = forwardRef(function TextInputImpl(
{
richtext,
placeholder,
hasRightPadding,
setRichText,
onPhotoPasted,
onNewLink,
onError,
...props
}: TextInputProps,
export function TextInput({
ref,
) {
richtext,
placeholder,
hasRightPadding,
setRichText,
onPhotoPasted,
onNewLink,
onError,
...props
}: TextInputProps) {
const {theme: t, fonts} = useAlf()
const textInput = useRef<PasteInputRef>(null)
const textInputSelection = useRef<Selection>({start: 0, end: 0})
const theme = useTheme()
const [autocompletePrefix, setAutocompletePrefix] = useState('')
const prevLength = React.useRef(richtext.length)
const prevLength = useRef(richtext.length)
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
focus: () => textInput.current?.focus(),
blur: () => {
textInput.current?.blur()
},
getCursorPosition: () => undefined, // Not implemented on native
maybeClosePopup: () => false, // Not needed on native
}))
const pastSuggestedUris = useRef(new Set<string>())
@@ -185,7 +164,7 @@ export const TextInput = forwardRef(function TextInputImpl(
[onChangeText, richtext, setAutocompletePrefix],
)
const inputTextStyle = React.useMemo(() => {
const inputTextStyle = useMemo(() => {
const style = normalizeTextStyles(
[a.text_lg, a.leading_snug, t.atoms.text],
{
@@ -277,4 +256,4 @@ export const TextInput = forwardRef(function TextInputImpl(
/>
</View>
)
})
}