+ <>
{isInitializing ? (
-
-
{t('loading')}...
+
) : (
<>
@@ -48,14 +51,14 @@ function EmailsSectionContent() {
))}
)}
-
+ {isInitializingSuccess &&
}
{isInitializingError && (
{' '}
{t('error_performing_request')}
)}
-
+
)
}
@@ -73,7 +76,6 @@ function EmailsSection() {
-
)
}
diff --git a/services/web/frontend/js/features/settings/components/emails/actions.tsx b/services/web/frontend/js/features/settings/components/emails/actions.tsx
index ef67d3d440..d8ef82ca87 100644
--- a/services/web/frontend/js/features/settings/components/emails/actions.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/actions.tsx
@@ -2,7 +2,6 @@ import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import MakePrimary from './actions/make-primary'
import Remove from './actions/remove'
-import Icon from '../../../../shared/components/icon'
import useAsync from '../../../../shared/hooks/use-async'
import { useUserEmailsContext } from '../../context/user-email-context'
import { UserEmailData } from '../../../../../../types/user-email'
@@ -51,8 +50,7 @@ function Actions({ userEmailData }: ActionsProps) {
/>
{(makePrimaryAsync.isError || deleteEmailAsync.isError) && (
- {' '}
- {t('error_performing_request')}
+ {t('generic_something_went_wrong')}
)}
diff --git a/services/web/frontend/js/features/settings/components/emails/add-email-input.tsx b/services/web/frontend/js/features/settings/components/emails/add-email-input.tsx
index 6715ebd8d8..ddb5f0a32b 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email-input.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email-input.tsx
@@ -4,6 +4,7 @@ import {
useCallback,
useEffect,
useState,
+ forwardRef,
} from 'react'
import { getJSON } from '../../../../infrastructure/fetch-json'
import useAbortController from '../../../../shared/hooks/use-abort-controller'
@@ -38,13 +39,14 @@ export function clearDomainCache() {
type AddEmailInputProps = {
onChange: (value: string, institution?: InstitutionInfo) => void
+ inputRef?: React.ForwardedRef
}
-export function AddEmailInput({ onChange }: AddEmailInputProps) {
+function AddEmailInputBase({ onChange, inputRef }: AddEmailInputProps) {
const { signal } = useAbortController()
- const [suggestion, setSuggestion] = useState(null)
- const [inputValue, setInputValue] = useState(null)
+ const [suggestion, setSuggestion] = useState(null)
+ const [inputValue, setInputValue] = useState(null)
const [matchedInstitution, setMatchedInstitution] =
useState(null)
@@ -52,7 +54,10 @@ export function AddEmailInput({ onChange }: AddEmailInputProps) {
if (inputValue == null) {
return
}
- if (matchedInstitution && suggestion === inputValue) {
+ if (
+ matchedInstitution &&
+ inputValue.endsWith(matchedInstitution.hostname)
+ ) {
onChange(inputValue, matchedInstitution)
} else {
onChange(inputValue)
@@ -103,12 +108,23 @@ export function AddEmailInput({ onChange }: AddEmailInputProps) {
const handleKeyDownEvent = useCallback(
(event: KeyboardEvent) => {
- if (event.key === 'Tab' || event.key === 'Enter') {
+ const setInputValueAndResetSuggestion = () => {
+ setInputValue(suggestion)
+ setSuggestion(null)
+ }
+
+ if (event.key === 'Enter') {
event.preventDefault()
+
if (suggestion) {
- setInputValue(suggestion)
+ setInputValueAndResetSuggestion()
}
}
+
+ if (event.key === 'Tab' && suggestion) {
+ event.preventDefault()
+ setInputValueAndResetSuggestion()
+ }
},
[suggestion]
)
@@ -129,7 +145,17 @@ export function AddEmailInput({ onChange }: AddEmailInputProps) {
onKeyDown={handleKeyDownEvent}
value={inputValue || ''}
placeholder="e.g. johndoe@mit.edu"
+ ref={inputRef}
/>