diff --git a/package.json b/package.json index 61c20d2f58..e58e18f218 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "build:apk": "eas build -p android --profile dev-android-apk" }, "dependencies": { - "@atproto/api": "^0.6.16", + "@atproto/api": "^0.6.17", "@bam.tech/react-native-image-resizer": "^3.0.4", "@braintree/sanitize-url": "^6.0.2", "@emoji-mart/react": "^1.1.1", diff --git a/src/view/com/composer/TagInput.tsx b/src/view/com/composer/TagInput.tsx index 5ba0fa2357..6af4b198a1 100644 --- a/src/view/com/composer/TagInput.tsx +++ b/src/view/com/composer/TagInput.tsx @@ -6,7 +6,6 @@ import { NativeSyntheticEvent, TextInputKeyPressEventData, Pressable, - InteractionManager, } from 'react-native' import { FontAwesomeIcon, @@ -72,28 +71,33 @@ export function TagInput({ [onChangeTags, setTags], ) + const onSubmitEditing = React.useCallback(() => { + const _tags = sanitize(value) + + if (_tags.length > 0) { + handleChangeTags(uniq([...tags, ..._tags]).slice(0, max)) + } + + // TODO: this is a hack to get the input to clear on iOS + setTimeout(() => { + setValue('') + input.current?.focus() + }, 1) // only positive values work + }, [max, value, tags, setValue, handleChangeTags]) + const onKeyPress = React.useCallback( (e: NativeSyntheticEvent) => { - if (e.nativeEvent.key === 'Enter' || e.nativeEvent.key === ' ') { - const _tags = sanitize(value) - - if (_tags.length > 0) { - handleChangeTags(uniq([...tags, ..._tags]).slice(0, max)) - } - - InteractionManager.runAfterInteractions(() => { - setValue('') - input.current?.focus() - }) + if (e.nativeEvent.key === ' ') { + onSubmitEditing() } else if (e.nativeEvent.key === 'Backspace' && value === '') { handleChangeTags(tags.slice(0, -1)) } }, - [max, value, tags, setValue, handleChangeTags], + [value, tags, onSubmitEditing, handleChangeTags], ) - const onChangeText = React.useCallback((value: string) => { - setValue(value) + const onChangeText = React.useCallback((v: string) => { + setValue(v) }, []) const onBlur = React.useCallback(() => { @@ -129,8 +133,10 @@ export function TagInput({ ref={input} value={value} onKeyPress={onKeyPress} + onSubmitEditing={onSubmitEditing} onChangeText={onChangeText} onBlur={onBlur} + blurOnSubmit={false} style={[styles.input, pal.textLight]} placeholder="Add tags..." autoCapitalize="none" @@ -162,5 +168,6 @@ const styles = StyleSheet.create({ paddingVertical: 4, paddingHorizontal: 8, borderRadius: 4, + overflow: 'hidden', }, }) diff --git a/yarn.lock b/yarn.lock index 2bd08edb9b..c6d8c66680 100644 --- a/yarn.lock +++ b/yarn.lock @@ -47,10 +47,10 @@ tlds "^1.234.0" typed-emitter "^2.1.0" -"@atproto/api@^0.6.16": - version "0.6.16" - resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.16.tgz#0e5f259a8eb8af239b4e77bf70d7e770b33f4eeb" - integrity sha512-DpG994bdwk7NWJSb36Af+0+FRWMFZgzTcrK0rN2tvlsMh6wBF/RdErjHKuoL8wcogGzbI2yp8eOqsA00lyoisw== +"@atproto/api@^0.6.17": + version "0.6.17" + resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.17.tgz#d0dfefe8584ab08f706f0e0f4a1d80ab89f63f45" + integrity sha512-ux2yDEPY5n+KVnyyXXjLMyWUQ1bFBmKhw99qH6S+bx7BhkVktOMJA4nlQZwcKt3DrMXpY1E+42npQEW8px05Bw== dependencies: "@atproto/common-web" "^0.2.0" "@atproto/lexicon" "^0.2.1"