diff --git a/app/components/UI/SrpInputGrid/SrpInputGrid.types.ts b/app/components/UI/SrpInputGrid/SrpInputGrid.types.ts
index cfd559604f0..985c6939459 100644
--- a/app/components/UI/SrpInputGrid/SrpInputGrid.types.ts
+++ b/app/components/UI/SrpInputGrid/SrpInputGrid.types.ts
@@ -48,4 +48,10 @@ export interface SrpInputGridProps {
* Callback when the current input word changes
*/
onCurrentWordChange?: (word: string) => void;
+
+ /**
+ * Whether to auto focus the first input on mount
+ * @default true
+ */
+ autoFocus?: boolean;
}
diff --git a/app/components/UI/SrpInputGrid/__snapshots__/index.test.tsx.snap b/app/components/UI/SrpInputGrid/__snapshots__/index.test.tsx.snap
index 193265368c2..f393bdfd389 100644
--- a/app/components/UI/SrpInputGrid/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/SrpInputGrid/__snapshots__/index.test.tsx.snap
@@ -93,7 +93,9 @@ exports[`SrpInputGrid renders with custom uniqueId 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={false}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
onBlur={[Function]}
@@ -104,6 +106,7 @@ exports[`SrpInputGrid renders with custom uniqueId 1`] = `
onSubmitEditing={[Function]}
placeholder=""
placeholderTextColor="#b7bbc8"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -187,7 +190,9 @@ exports[`SrpInputGrid renders with custom uniqueId 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={true}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
multiline={true}
@@ -196,8 +201,10 @@ exports[`SrpInputGrid renders with custom uniqueId 1`] = `
onFocus={[Function]}
onKeyPress={[Function]}
onSelectionChange={[Function]}
+ onSubmitEditing={[Function]}
placeholder="Enter your Secret Recovery Phrase"
placeholderTextColor="#686e7d"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -345,7 +352,9 @@ exports[`SrpInputGrid renders with disabled state 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={false}
+ blurOnSubmit={false}
editable={false}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
onBlur={[Function]}
@@ -356,6 +365,7 @@ exports[`SrpInputGrid renders with disabled state 1`] = `
onSubmitEditing={[Function]}
placeholder=""
placeholderTextColor="#b7bbc8"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -439,7 +449,9 @@ exports[`SrpInputGrid renders with disabled state 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={true}
+ blurOnSubmit={false}
editable={false}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
multiline={true}
@@ -448,8 +460,10 @@ exports[`SrpInputGrid renders with disabled state 1`] = `
onFocus={[Function]}
onKeyPress={[Function]}
onSelectionChange={[Function]}
+ onSubmitEditing={[Function]}
placeholder="Enter your Secret Recovery Phrase"
placeholderTextColor="#686e7d"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -597,7 +611,9 @@ exports[`SrpInputGrid renders with empty seed phrase 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={false}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
onBlur={[Function]}
@@ -608,6 +624,7 @@ exports[`SrpInputGrid renders with empty seed phrase 1`] = `
onSubmitEditing={[Function]}
placeholder=""
placeholderTextColor="#b7bbc8"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -691,7 +708,9 @@ exports[`SrpInputGrid renders with empty seed phrase 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={true}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
multiline={true}
@@ -700,8 +719,10 @@ exports[`SrpInputGrid renders with empty seed phrase 1`] = `
onFocus={[Function]}
onKeyPress={[Function]}
onSelectionChange={[Function]}
+ onSubmitEditing={[Function]}
placeholder="Enter your Secret Recovery Phrase"
placeholderTextColor="#686e7d"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -884,7 +905,9 @@ exports[`SrpInputGrid renders with multiple words 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={false}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
onBlur={[Function]}
@@ -895,6 +918,7 @@ exports[`SrpInputGrid renders with multiple words 1`] = `
onSubmitEditing={[Function]}
placeholder=""
placeholderTextColor="#b7bbc8"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -1014,7 +1038,9 @@ exports[`SrpInputGrid renders with multiple words 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={false}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
onBlur={[Function]}
@@ -1025,6 +1051,7 @@ exports[`SrpInputGrid renders with multiple words 1`] = `
onSubmitEditing={[Function]}
placeholder=""
placeholderTextColor="#b7bbc8"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -1144,7 +1171,9 @@ exports[`SrpInputGrid renders with multiple words 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={false}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
onBlur={[Function]}
@@ -1155,6 +1184,7 @@ exports[`SrpInputGrid renders with multiple words 1`] = `
onSubmitEditing={[Function]}
placeholder=""
placeholderTextColor="#b7bbc8"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -1239,7 +1269,9 @@ exports[`SrpInputGrid renders with multiple words 1`] = `
autoComplete="off"
autoCorrect={false}
autoFocus={false}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
multiline={true}
@@ -1248,8 +1280,10 @@ exports[`SrpInputGrid renders with multiple words 1`] = `
onFocus={[Function]}
onKeyPress={[Function]}
onSelectionChange={[Function]}
+ onSubmitEditing={[Function]}
placeholder="Enter your Secret Recovery Phrase"
placeholderTextColor="#686e7d"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
diff --git a/app/components/UI/SrpInputGrid/index.test.tsx b/app/components/UI/SrpInputGrid/index.test.tsx
index 253ef4356b5..78ba232baeb 100644
--- a/app/components/UI/SrpInputGrid/index.test.tsx
+++ b/app/components/UI/SrpInputGrid/index.test.tsx
@@ -133,7 +133,7 @@ describe('SrpInputGrid', () => {
expect(mockOnSeedPhraseChange).toHaveBeenCalled();
});
- it('handles enter key press to move to next input', () => {
+ it('dismisses keyboard on submit editing', () => {
const seedPhrase = ['wallet', ''];
const { getByTestId } = renderWithProvider(
,
diff --git a/app/components/UI/SrpInputGrid/index.tsx b/app/components/UI/SrpInputGrid/index.tsx
index bec3ed8f9a4..f7a9b96ac7e 100644
--- a/app/components/UI/SrpInputGrid/index.tsx
+++ b/app/components/UI/SrpInputGrid/index.tsx
@@ -58,6 +58,7 @@ const SrpInputGrid = React.forwardRef(
uniqueId = uuidv4(),
disabled = false,
onCurrentWordChange,
+ autoFocus: autoFocusProp = true,
},
ref,
) => {
@@ -279,16 +280,6 @@ const SrpInputGrid = React.forwardRef(
[seedPhrase, onSeedPhraseChange],
);
- const handleEnterKeyPress = useCallback(
- (index: number) => {
- handleSeedPhraseChangeAtIndexRef.current(
- `${seedPhrase[index]}${SPACE_CHAR}`,
- index,
- );
- },
- [seedPhrase],
- );
-
// Validate seed phrase and show errors
const error = useMemo(() => {
const hasWordErrors = Object.values(errorWordIndexes).some(Boolean);
@@ -406,9 +397,7 @@ const SrpInputGrid = React.forwardRef(
? handleSeedPhraseChange(text)
: handleSeedPhraseChangeAtIndex(text, index);
}}
- onSubmitEditing={() => {
- handleEnterKeyPress(index);
- }}
+ onSubmitEditing={() => Keyboard.dismiss()}
placeholder=""
placeholderTextColor={colors.text.muted}
size={TextFieldSize.Md}
@@ -433,11 +422,17 @@ const SrpInputGrid = React.forwardRef(
autoCapitalize="none"
testID={`${testIdPrefix}_${index}`}
keyboardType="visible-password"
+ returnKeyType="done"
+ blurOnSubmit={false}
+ enablesReturnKeyAutomatically={false}
autoCorrect={false}
textContentType="none"
spellCheck={false}
importantForAutofill="no"
- autoFocus={index === nextSeedPhraseInputFocusedIndex}
+ autoFocus={
+ index === nextSeedPhraseInputFocusedIndex &&
+ (autoFocusProp || index > 0)
+ }
onKeyPress={(e) => handleKeyPress(e, index)}
isDisabled={disabled}
/>
@@ -472,11 +467,15 @@ const SrpInputGrid = React.forwardRef(
autoCapitalize="none"
testID={testIdPrefix}
keyboardType="visible-password"
+ returnKeyType="done"
+ blurOnSubmit={false}
+ enablesReturnKeyAutomatically={false}
+ onSubmitEditing={() => Keyboard.dismiss()}
autoCorrect={false}
textContentType="none"
spellCheck={false}
importantForAutofill="no"
- autoFocus={isFirstInput}
+ autoFocus={autoFocusProp && isFirstInput}
multiline
onKeyPress={(e) => handleKeyPress(e, 0)}
isDisabled={disabled}
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap b/app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap
index 12fb1631f36..ee5c1f0ed53 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap
@@ -581,7 +581,9 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh
autoComplete="off"
autoCorrect={false}
autoFocus={false}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
onBlur={[Function]}
@@ -592,6 +594,7 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh
onSubmitEditing={[Function]}
placeholder=""
placeholderTextColor="#b7bbc8"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -674,8 +677,10 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh
autoCapitalize="none"
autoComplete="off"
autoCorrect={false}
- autoFocus={true}
+ autoFocus={false}
+ blurOnSubmit={false}
editable={true}
+ enablesReturnKeyAutomatically={false}
importantForAutofill="no"
keyboardType="visible-password"
multiline={true}
@@ -684,8 +689,10 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh
onFocus={[Function]}
onKeyPress={[Function]}
onSelectionChange={[Function]}
+ onSubmitEditing={[Function]}
placeholder="Add a space between each word and make sure no one is watching."
placeholderTextColor="#686e7d"
+ returnKeyType="done"
showSoftInputOnFocus={true}
spellCheck={false}
style={
@@ -738,59 +745,59 @@ exports[`ImportFromSecretRecoveryPhrase Import a wallet UI render matches snapsh
Paste
-
-
-
- Continue
-
-
-
+
+
+
+ Continue
+
+
+
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
index 17d8c301c9e..0bb195724d2 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
@@ -618,18 +618,8 @@ const ImportFromSecretRecoveryPhrase = ({
placeholderText={strings('import_from_seed.srp_placeholder')}
uniqueId={uniqueId}
onCurrentWordChange={setCurrentInputWord}
+ autoFocus={false}
/>
-
-
-
)}
@@ -794,6 +784,19 @@ const ImportFromSecretRecoveryPhrase = ({
)}
+ {currentStep === 0 && (
+
+
+
+ )}
{isSrpWordSuggestionsEnabled &&
currentStep === 0 &&
isKeyboardVisible && (
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.test.tsx b/app/components/Views/ImportFromSecretRecoveryPhrase/index.test.tsx
index b04dba7002e..f63a3d149c8 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/index.test.tsx
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/index.test.tsx
@@ -334,14 +334,14 @@ describe('ImportFromSecretRecoveryPhrase', () => {
);
});
- it('on enter key press, the new input field value is created', async () => {
- const { getByPlaceholderText, getByTestId } = renderScreen(
+ it('on submit editing, keyboard dismisses without creating new input', async () => {
+ const { getByPlaceholderText, getByTestId, queryByTestId } = renderScreen(
ImportFromSecretRecoveryPhrase,
{ name: Routes.ONBOARDING.IMPORT_FROM_SECRET_RECOVERY_PHRASE },
{ state: initialState },
);
- // Enter a valid 12-word seed phrase
+ // Enter a word
const input = getByPlaceholderText(
strings('import_from_seed.srp_placeholder'),
);
@@ -367,11 +367,11 @@ describe('ImportFromSecretRecoveryPhrase', () => {
fireEvent(firstGridInput, 'onSubmitEditing');
});
+ // Verify no new input was created (keyboard just dismisses)
await waitFor(() => {
- const secondInput = getByTestId(
- `${ImportFromSeedSelectorsIDs.SEED_PHRASE_INPUT_ID}_1`,
- );
- expect(secondInput).toBeOnTheScreen();
+ expect(
+ queryByTestId(`${ImportFromSeedSelectorsIDs.SEED_PHRASE_INPUT_ID}_1`),
+ ).toBeNull();
});
});
@@ -575,7 +575,7 @@ describe('ImportFromSecretRecoveryPhrase', () => {
});
it('on entering an invalid seed phrase, spellcheck error message is shown', async () => {
- const { getByPlaceholderText, getByText } = renderScreen(
+ const { getByPlaceholderText, getAllByText } = renderScreen(
ImportFromSecretRecoveryPhrase,
{ name: Routes.ONBOARDING.IMPORT_FROM_SECRET_RECOVERY_PHRASE },
{ state: initialState },
@@ -595,10 +595,11 @@ describe('ImportFromSecretRecoveryPhrase', () => {
});
await waitFor(() => {
- const errorMessage = getByText(
+ const errorMessages = getAllByText(
strings('import_from_seed.spellcheck_error'),
);
- expect(errorMessage).toBeOnTheScreen();
+ expect(errorMessages.length).toBeGreaterThan(0);
+ expect(errorMessages[0]).toBeOnTheScreen();
});
});
diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
index c5d19989414..67ca33cb316 100644
--- a/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
+++ b/app/components/Views/ImportFromSecretRecoveryPhrase/styles.ts
@@ -235,6 +235,11 @@ const createStyles = (colors: any) =>
left: 0,
right: 0,
},
+ fixedBottomContainer: {
+ paddingHorizontal: 16,
+ paddingVertical: 16,
+ backgroundColor: colors.background.default,
+ },
});
export default createStyles;
diff --git a/app/components/Views/ImportNewSecretRecoveryPhrase/index.test.tsx b/app/components/Views/ImportNewSecretRecoveryPhrase/index.test.tsx
index a65f4bdfb1e..5772680b6cd 100644
--- a/app/components/Views/ImportNewSecretRecoveryPhrase/index.test.tsx
+++ b/app/components/Views/ImportNewSecretRecoveryPhrase/index.test.tsx
@@ -533,7 +533,7 @@ describe('ImportNewSecretRecoveryPhrase', () => {
it('displays error for invalid word in pasted SRP', async () => {
mockGetString.mockResolvedValue(invalidMnemonic);
- const { getByText } = renderScreen(
+ const { getByText, getAllByText } = renderScreen(
ImportNewSecretRecoveryPhrase,
{ name: 'ImportNewSecretRecoveryPhrase' },
{
@@ -548,16 +548,17 @@ describe('ImportNewSecretRecoveryPhrase', () => {
});
await waitFor(() => {
- expect(
- getByText(messages.import_from_seed.spellcheck_error),
- ).toBeTruthy();
+ const errorMessages = getAllByText(
+ messages.import_from_seed.spellcheck_error,
+ );
+ expect(errorMessages.length).toBeGreaterThan(0);
});
});
it('clears error when SRP is cleared', async () => {
mockGetString.mockResolvedValue(invalidMnemonic);
- const { getByText, queryByText } = renderScreen(
+ const { getByText, getAllByText, queryAllByText } = renderScreen(
ImportNewSecretRecoveryPhrase,
{ name: 'ImportNewSecretRecoveryPhrase' },
{
@@ -572,9 +573,10 @@ describe('ImportNewSecretRecoveryPhrase', () => {
});
await waitFor(() => {
- expect(
- getByText(messages.import_from_seed.spellcheck_error),
- ).toBeTruthy();
+ const errorMessages = getAllByText(
+ messages.import_from_seed.spellcheck_error,
+ );
+ expect(errorMessages.length).toBeGreaterThan(0);
});
const clearButton = getByText(messages.import_from_seed.clear_all);
@@ -585,8 +587,8 @@ describe('ImportNewSecretRecoveryPhrase', () => {
await waitFor(() => {
expect(
- queryByText(messages.import_from_seed.spellcheck_error),
- ).toBeNull();
+ queryAllByText(messages.import_from_seed.spellcheck_error).length,
+ ).toBe(0);
});
});
@@ -899,10 +901,10 @@ describe('ImportNewSecretRecoveryPhrase', () => {
});
});
- it('adds space when enter key is pressed in grid input', async () => {
+ it('dismisses keyboard when submit is pressed in grid input', async () => {
mockGetString.mockResolvedValue('word1 word2');
- const { getByTestId, getByText } = renderScreen(
+ const { getByTestId, getByText, queryByTestId } = renderScreen(
ImportNewSecretRecoveryPhrase,
{ name: 'ImportNewSecretRecoveryPhrase' },
{
@@ -928,10 +930,11 @@ describe('ImportNewSecretRecoveryPhrase', () => {
await fireEvent(input1, 'onSubmitEditing');
});
+ // Verify no new input was created (keyboard just dismisses)
await waitFor(() => {
expect(
- getByTestId(`${ImportSRPIDs.SEED_PHRASE_INPUT_ID}_2`),
- ).toBeTruthy();
+ queryByTestId(`${ImportSRPIDs.SEED_PHRASE_INPUT_ID}_2`),
+ ).toBeNull();
});
});
@@ -975,7 +978,7 @@ describe('ImportNewSecretRecoveryPhrase', () => {
it('validates word on focus change', async () => {
mockGetString.mockResolvedValue('word1 word2 word3');
- const { getByTestId, getByText, queryByText } = renderScreen(
+ const { getByTestId, getByText, queryAllByText } = renderScreen(
ImportNewSecretRecoveryPhrase,
{ name: 'ImportNewSecretRecoveryPhrase' },
{
@@ -1016,8 +1019,8 @@ describe('ImportNewSecretRecoveryPhrase', () => {
await waitFor(() => {
expect(
- queryByText(messages.import_from_seed.spellcheck_error),
- ).toBeTruthy();
+ queryAllByText(messages.import_from_seed.spellcheck_error).length,
+ ).toBeGreaterThan(0);
});
});
diff --git a/app/components/Views/ImportNewSecretRecoveryPhrase/index.tsx b/app/components/Views/ImportNewSecretRecoveryPhrase/index.tsx
index 078ebcec018..48c4b5abdd8 100644
--- a/app/components/Views/ImportNewSecretRecoveryPhrase/index.tsx
+++ b/app/components/Views/ImportNewSecretRecoveryPhrase/index.tsx
@@ -306,23 +306,22 @@ const ImportNewSecretRecoveryPhrase = () => {
)}
uniqueId={uniqueId}
onCurrentWordChange={setCurrentInputWord}
- />
-
-
-
+
+
+
{isSrpWordSuggestionsEnabled && isKeyboardVisible && (
left: 0,
right: 0,
},
+ fixedBottomContainer: {
+ paddingHorizontal: 16,
+ paddingVertical: 16,
+ backgroundColor: colors.background.default,
+ },
});
export { createStyles };