Use debounce instead of onBlur to update image fees info

This commit is contained in:
ekzyis 2023-10-27 03:09:30 +02:00
parent d8f502254c
commit 227e1737da

View File

@ -246,6 +246,12 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
setDragStyle(null) setDragStyle(null)
}, [setDragStyle]) }, [setDragStyle])
useEffect(debounce(() => {
const text = innerRef?.current.value
const s3Keys = text ? [...text.matchAll(AWS_S3_URL_REGEXP)].map(m => Number(m[1])) : []
updateImageFeesInfo({ variables: { s3Keys } })
}, 1000), [innerRef?.current?.value])
return ( return (
<FormGroup label={label} className={groupClassName}> <FormGroup label={label} className={groupClassName}>
<div className={`${styles.markdownInput} ${tab === 'write' ? styles.noTopLeftRadius : ''}`}> <div className={`${styles.markdownInput} ${tab === 'write' ? styles.noTopLeftRadius : ''}`}>
@ -301,12 +307,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
{...props} {...props}
onChange={onChangeInner} onChange={onChangeInner}
onKeyDown={onKeyDownInner(userSuggestOnKeyDown)} onKeyDown={onKeyDownInner(userSuggestOnKeyDown)}
onBlur={() => { onBlur={() => setTimeout(resetSuggestions, 100)}
const text = innerRef?.current.value
const s3Keys = text ? [...text.matchAll(AWS_S3_URL_REGEXP)].map(m => Number(m[1])) : []
updateImageFeesInfo({ variables: { s3Keys } })
setTimeout(resetSuggestions, 100)
}}
onDragEnter={onDragEnter} onDragEnter={onDragEnter}
onDragLeave={onDragLeave} onDragLeave={onDragLeave}
onDrop={onDrop} onDrop={onDrop}