···1010 useMessageDraft,
1111 useSaveMessageDraft,
1212} from '#/state/messages/message-drafts'
1313+import {isSafari} from 'lib/browser'
1314import * as Toast from '#/view/com/util/Toast'
1415import {atoms as a, useTheme} from '#/alf'
1516import {useSharedInputStyles} from '#/components/forms/TextField'
···4748 (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
4849 // Don't submit the form when the Japanese or any other IME is composing
4950 if (isComposing.current) return
5151+5252+ // see https://github.com/bluesky-social/social-app/issues/4178
5353+ // see https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
5454+ // see https://lists.w3.org/Archives/Public/www-dom/2010JulSep/att-0182/keyCode-spec.html
5555+ //
5656+ // On Safari, the final keydown event to dismiss the IME - which is the enter key - is also "Enter" below.
5757+ // Obviously, this causes problems because the final dismissal should _not_ submit the text, but should just
5858+ // stop the IME editing. This is the behavior of Chrome and Firefox, but not Safari.
5959+ //
6060+ // Keycode is deprecated, however the alternative seems to only be to compare the timestamp from the
6161+ // onCompositionEnd event to the timestamp of the keydown event, which is not reliable. For example, this hack
6262+ // uses that method: https://github.com/ProseMirror/prosemirror-view/pull/44. However, from my 500ms resulted in
6363+ // far too long of a delay, and a subsequent enter press would often just end up doing nothing. A shorter time
6464+ // frame was also not great, since it was too short to be reliable (i.e. an older system might have a larger
6565+ // time gap between the two events firing.
6666+ if (isSafari && e.key === 'Enter' && e.keyCode === 229) {
6767+ return
6868+ }
6969+5070 if (e.key === 'Enter') {
5171 if (e.shiftKey) return
5272 e.preventDefault()
+1-2
src/view/com/util/List.web.tsx
···55import {batchedUpdates} from '#/lib/batchedUpdates'
66import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
77import {useScrollHandlers} from '#/lib/ScrollContext'
88+import {isFirefox, isSafari} from 'lib/browser'
89import {usePalette} from 'lib/hooks/usePalette'
910import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
1011import {addStyle} from 'lib/styles'
···503504) => React.ReactElement
504505505506// https://stackoverflow.com/questions/7944460/detect-safari-browser
506506-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
507507-const isFirefox = /firefox|fxios/i.test(navigator.userAgent)
508507509508const styles = StyleSheet.create({
510509 sideBorders: {