@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/src/mobile/bottom-sheet/index.native.js

@@ -145,9 +145,13 @@ class BottomSheet extends Component {
 			} );
 			this.lastLayoutAnimation = layoutAnimation;
 		} else {
-			this.performRegularLayoutAnimation( {
-				useLastLayoutAnimation: false,
-			} );
+			// TODO: Reinstate animations, possibly replacing `LayoutAnimation` with
+			// more nuanced `Animated` usage or replacing our custom `BottomSheet`
+			// with `@gorhom/bottom-sheet`. This animation was disabled to avoid a
+			// preexisting bug: https://git.io/JMPCV
+			// this.performRegularLayoutAnimation( {
+			// 	useLastLayoutAnimation: false,
+			// } );
 		}
 	}
 
@@ -185,7 +189,10 @@ class BottomSheet extends Component {
 			);
 		}
 
-		Dimensions.addEventListener( 'change', this.onDimensionsChange );
+		this.dimensionsChangeSubscription = Dimensions.addEventListener(
+			'change',
+			this.onDimensionsChange
+		);
 
 		// 'Will' keyboard events are not available on Android.
 		// Reference: https://reactnative.dev/docs/0.61/keyboard#addlistener
@@ -206,7 +213,7 @@ class BottomSheet extends Component {
 	}
 
 	componentWillUnmount() {
-		Dimensions.removeEventListener( 'change', this.onDimensionsChange );
+		this.dimensionsChangeSubscription.remove();
 		this.keyboardShowListener.remove();
 		this.keyboardHideListener.remove();
 		if ( this.androidModalClosedSubscription ) {
@@ -217,10 +224,6 @@ class BottomSheet extends Component {
 		}
 		this.safeAreaEventSubscription.remove();
 		this.safeAreaEventSubscription = null;
-		SafeArea.removeEventListener(
-			'safeAreaInsetsForRootViewDidChange',
-			this.onSafeAreaInsetsUpdate
-		);
 	}
 
 	onSafeAreaInsetsUpdate( result ) {
@@ -254,16 +257,19 @@ class BottomSheet extends Component {
 				statusBarHeight -
 				this.headerHeight );
 
-		// On horizontal mode `maxHeight` has to be set on 90% of width
+		// In landscape orientation, set `maxHeight` to ~96% of the height
 		if ( width > height ) {
 			this.setState( {
-				maxHeight: Math.min( 0.9 * height, maxHeightWithOpenKeyboard ),
+				maxHeight: Math.min(
+					0.96 * height - this.headerHeight,
+					maxHeightWithOpenKeyboard
+				),
 			} );
-			//	On vertical mode `maxHeight` has to be set on 50% of width
+			// In portrait orientation, set `maxHeight` to ~59% of the height
 		} else {
 			this.setState( {
 				maxHeight: Math.min(
-					height / 2 - safeAreaBottomInset,
+					height * 0.59 - safeAreaBottomInset - this.headerHeight,
 					maxHeightWithOpenKeyboard
 				),
 			} );
@@ -279,7 +285,10 @@ class BottomSheet extends Component {
 		const { height } = nativeEvent.layout;
 		// The layout animation should only be triggered if the header
 		// height has changed after being mounted.
-		if ( this.headerHeight !== 0 && height !== this.headerHeight ) {
+		if (
+			this.headerHeight !== 0 &&
+			Math.round( height ) !== Math.round( this.headerHeight )
+		) {
 			this.performRegularLayoutAnimation( {
 				useLastLayoutAnimation: true,
 			} );
@@ -545,6 +554,7 @@ class BottomSheet extends Component {
 					<View
 						style={ styles.header }
 						onLayout={ this.onHeaderLayout }
+						testID={ `${ rest.testID || 'bottom-sheet' }-header` }
 					>
 						{ showDragIndicator() && (
 							<View style={ styles.dragIndicator } />

package/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js

@@ -16,16 +16,19 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import Cell from './cell';
 import cellStyles from './styles.scss';
 import suggestionStyles from './link-suggestion-styles.scss';
-import { posts, pages, empty } from '../gridicons';
+import { posts, pages, empty, clipboard } from '../gridicons';
 
 const icons = {
 	URL: globe,
+	clipboard,
 	post: posts,
 	page: pages,
 };
 
 const getSummaryForType = ( type ) => {
 	switch ( type ) {
+		case 'clipboard':
+			return __( 'From clipboard' );
 		case 'mailto':
 			return __( 'Add this email link' );
 		case 'tel':
@@ -36,7 +39,7 @@ const getSummaryForType = ( type ) => {
 };
 
 // we use some Cell styles here with a column flex-direction
-function LinkSuggestionItemCell( { suggestion, onLinkPicked } ) {
+function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 	const { title: contentTitle, url, type, isDirectEntry } = suggestion;
 	const title = isDirectEntry ? url : contentTitle;
 	const summary = isDirectEntry ? getSummaryForType( type ) : url;
@@ -58,6 +61,7 @@ function LinkSuggestionItemCell( { suggestion, onLinkPicked } ) {
 
 	return (
 		<Cell
+			{ ...props }
 			icon={ icons[ type ] || empty }
 			onPress={ pickLink }
 			separatorType={ 'none' }

package/src/mobile/bottom-sheet/link-suggestion-styles.native.scss

@@ -1,6 +1,7 @@
 .titleStyle {
 	text-align: left;
 	font-weight: bold;
+	width: 100%;
 }
 
 .summaryStyle {
@@ -16,6 +17,8 @@
 }
 
 .containerStyle {
+	flex-grow: 1;
+	flex-basis: 0;
 	align-items: flex-start;
 }
 

package/src/mobile/bottom-sheet/range-text-input.native.js

@@ -56,11 +56,14 @@ class RangeTextInput extends Component {
 	}
 
 	componentDidMount() {
-		AppState.addEventListener( 'change', this.handleChangePixelRatio );
+		this.appStateChangeSubscription = AppState.addEventListener(
+			'change',
+			this.handleChangePixelRatio
+		);
 	}
 
 	componentWillUnmount() {
-		AppState.removeEventListener( 'change', this.handleChangePixelRatio );
+		this.appStateChangeSubscription.remove();
 		clearTimeout( this.timeoutAnnounceValue );
 	}
 

package/src/mobile/bottom-sheet/styles.native.scss

@@ -103,6 +103,10 @@
 .cellRowContainer {
 	flex-direction: row;
 	align-items: center;
+	flex-shrink: 1;
+}
+
+.cellRowIcon {
 	flex-shrink: 0;
 }
 

package/src/mobile/bottom-sheet/test/index.native.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render } from 'test/helpers';
+import { LayoutAnimation } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import BottomSheet from '../';
+
+it( 'does not animate transitions between header heights differing less than 1 pixel', () => {
+	const screen = render( <BottomSheet isVisible /> );
+
+	const bottomSheetHeader = screen.getByTestId( 'bottom-sheet-header' );
+	fireEvent( bottomSheetHeader, 'layout', {
+		nativeEvent: { layout: { height: 123 } },
+	} );
+	fireEvent( bottomSheetHeader, 'layout', {
+		nativeEvent: { layout: { height: 123.001 } },
+	} );
+
+	expect( LayoutAnimation.configureNext ).not.toHaveBeenCalled();
+} );

package/src/mobile/color-settings/index.native.js

@@ -27,7 +27,9 @@ const ColorSettingsMemo = memo(
 		colorValue,
 		gradientValue,
 		onGradientChange,
+		onColorCleared,
 		label,
+		hideNavigation,
 	} ) => {
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
@@ -43,7 +45,9 @@ const ColorSettingsMemo = memo(
 						colorValue,
 						gradientValue,
 						onGradientChange,
+						onColorCleared,
 						label,
+						hideNavigation,
 					} }
 				>
 					<PaletteScreen />

package/src/mobile/color-settings/palette.screen.native.js

@@ -26,7 +26,7 @@ import { colorsUtils } from './utils';
 
 import styles from './style.scss';
 
-const HIT_SLOP = { top: 22, bottom: 22, left: 22, right: 22 };
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
 
 const PaletteScreen = () => {
 	const route = useRoute();
@@ -36,8 +36,10 @@ const PaletteScreen = () => {
 		label,
 		onColorChange,
 		onGradientChange,
+		onColorCleared,
 		colorValue,
 		defaultSettings,
+		hideNavigation = false,
 	} = route.params || {};
 	const { segments, isGradient } = colorsUtils;
 	const [ currentValue, setCurrentValue ] = useState( colorValue );
@@ -84,6 +86,10 @@ const PaletteScreen = () => {
 		} else {
 			onGradientChange( '' );
 		}
+
+		if ( onColorCleared ) {
+			onColorCleared();
+		}
 	}
 
 	function onCustomPress() {
@@ -164,10 +170,12 @@ const PaletteScreen = () => {
 	}
 	return (
 		<View>
-			<NavBar>
-				<NavBar.BackButton onPress={ navigation.goBack } />
-				<NavBar.Heading>{ label } </NavBar.Heading>
-			</NavBar>
+			{ ! hideNavigation && (
+				<NavBar>
+					<NavBar.BackButton onPress={ navigation.goBack } />
+					<NavBar.Heading>{ label } </NavBar.Heading>
+				</NavBar>
+			) }
 			<ColorPalette
 				setColor={ setColor }
 				activeColor={ currentValue }

package/src/mobile/color-settings/style.native.scss

@@ -45,7 +45,7 @@
 }
 
 .clearButtonContainer {
-	align-items: flex-end;
+	align-self: flex-end;
 }
 
 .clearButton {

package/src/mobile/color-settings/utils.native.js

@@ -1,11 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 const gradients = {
 	linear: 'linear-gradient',
 	radial: 'radial-gradient',
 };
 
 const gradientOptions = [
-	{ label: 'Linear', value: gradients.linear },
-	{ label: 'Radial', value: gradients.radial },
+	{ label: __( 'Linear' ), value: gradients.linear },
+	{ label: __( 'Radial' ), value: gradients.radial },
 ];
 
 const getGradientType = ( color ) => {
@@ -23,7 +28,7 @@ export const colorsUtils = {
 		picker: 'Picker',
 		palette: 'Palette',
 	},
-	segments: [ 'Solid', 'Gradient' ],
+	segments: [ __( 'Solid' ), __( 'Gradient' ) ],
 	gradients,
 	gradientOptions,
 	getGradientType,

package/src/mobile/global-styles-context/utils.native.js

@@ -162,7 +162,7 @@ export function getBlockTypography(
 		}
 	}
 
-	if ( blockStyleAttributes?.fontSize ) {
+	if ( blockStyleAttributes?.fontSize && baseGlobalStyles ) {
 		const mappedFontSize = find( fontSizes, {
 			slug: blockStyleAttributes?.fontSize,
 		} );

package/src/mobile/gridicons/index.native.js

@@ -9,6 +9,9 @@ const fromPathData24x24 = ( pathData ) => (
 	</SVG>
 );
 
+export const clipboard = fromPathData24x24(
+	'M16 18H8v-2h8v2zm0-6H8v2h8v-2zm2-9h-2v2h2v15H6V5h2V3H6a2 2 0 00-2 2v15a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2zm-4 2V4a2 2 0 10-4 0v1a2 2 0 00-2 2v1h8V7a2 2 0 00-2-2z'
+);
 export const posts = fromPathData24x24(
 	'M16 19H3v-2h13v2zm5-10H3v2h18V9zM3 5v2h11V5H3zm14 0v2h4V5h-4zm-6 8v2h10v-2H11zm-8 0v2h5v-2H3z'
 );
@@ -21,15 +24,12 @@ export const refresh = fromPathData24x24(
 export const noticeOutline = fromPathData24x24(
 	'M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z'
 );
-
 export const empty = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" />
 );
-
 export const search = fromPathData24x24(
 	'M21,19l-5.154-5.154C16.574,12.742,17,11.421,17,10c0-3.866-3.134-7-7-7s-7,3.134-7,7c0,3.866,3.134,7,7,7 c1.421,0,2.742-0.426,3.846-1.154L19,21L21,19z M5,10c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S5,12.757,5,10z'
 );
-
 export default {
 	empty,
 	posts,

package/src/mobile/html-text-input/test/index.native.js

@@ -1,31 +1,21 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, fireEvent } from 'test/helpers';
 
 /**
  * Internal dependencies
  */
 import { HTMLTextInput } from '..';
 
-// Utility to find a TextInput in a ShallowWrapper
-const findTextInputInWrapper = ( wrapper, accessibilityLabel ) => {
-	return wrapper
-		.dive()
-		.findWhere( ( node ) => {
-			return node.prop( 'accessibilityLabel' ) === accessibilityLabel;
-		} )
-		.first();
-};
-
 // Finds the Content TextInput in our HTMLInputView
-const findContentTextInput = ( wrapper ) => {
-	return findTextInputInWrapper( wrapper, 'html-view-content' );
+const findContentTextInput = ( screen ) => {
+	return screen.getByA11yLabel( 'html-view-content' );
 };
 
 // Finds the Title TextInput in our HTMLInputView
-const findTitleTextInput = ( wrapper ) => {
-	return findTextInputInWrapper( wrapper, 'html-view-title' );
+const findTitleTextInput = ( screen ) => {
+	return screen.getByA11yLabel( 'html-view-title' );
 };
 
 const getStylesFromColorScheme = () => {
@@ -34,42 +24,40 @@ const getStylesFromColorScheme = () => {
 
 describe( 'HTMLTextInput', () => {
 	it( 'HTMLTextInput renders', () => {
-		const wrapper = shallow(
+		const screen = render(
 			<HTMLTextInput
 				getStylesFromColorScheme={ getStylesFromColorScheme }
 			/>
 		);
-		expect( wrapper ).toBeTruthy();
+		expect( screen.container ).toBeTruthy();
 	} );
 
-	it( 'HTMLTextInput updates store and state on HTML text change', () => {
+	it( 'HTMLTextInput updates state on HTML text change', () => {
 		const onChange = jest.fn();
 
-		const wrapper = shallow(
+		const screen = render(
 			<HTMLTextInput
 				onChange={ onChange }
+				onPersist={ jest.fn() }
 				getStylesFromColorScheme={ getStylesFromColorScheme }
 			/>
 		);
 
-		expect( wrapper.instance().state.isDirty ).toBeFalsy();
-
 		// Simulate user typing text
-		const htmlTextInput = findContentTextInput( wrapper );
-		htmlTextInput.simulate( 'changeText', 'text' );
+		const htmlTextInput = findContentTextInput( screen );
+		fireEvent( htmlTextInput, 'changeText', 'text' );
 
 		//Check if the onChange is called and the state is updated
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( 'text' );
 
-		expect( wrapper.instance().state.isDirty ).toBeTruthy();
-		expect( wrapper.instance().state.value ).toEqual( 'text' );
+		expect( screen.getByDisplayValue( 'text' ) ).toBeDefined();
 	} );
 
 	it( 'HTMLTextInput persists changes in HTML text input on blur', () => {
 		const onPersist = jest.fn();
 
-		const wrapper = shallow(
+		const screen = render(
 			<HTMLTextInput
 				onPersist={ onPersist }
 				onChange={ jest.fn() }
@@ -78,30 +66,41 @@ describe( 'HTMLTextInput', () => {
 		);
 
 		// Simulate user typing text
-		const htmlTextInput = findContentTextInput( wrapper );
-		htmlTextInput.simulate( 'changeText', 'text' );
+		const htmlTextInput = findContentTextInput( screen );
+		fireEvent( htmlTextInput, 'changeText', 'text' );
 
 		//Simulate blur event
-		htmlTextInput.simulate( 'blur' );
+		fireEvent( htmlTextInput, 'blur' );
 
 		//Normally prop.value is updated with the help of withSelect
 		//But we don't have it in tests so we just simulate it
-		wrapper.setProps( { value: 'text' } );
+		screen.update(
+			<HTMLTextInput
+				onPersist={ onPersist }
+				onChange={ jest.fn() }
+				getStylesFromColorScheme={ getStylesFromColorScheme }
+				value="text"
+			/>
+		);
 
 		//Check if the onPersist is called and the state is updated
 		expect( onPersist ).toHaveBeenCalledTimes( 1 );
 		expect( onPersist ).toHaveBeenCalledWith( 'text' );
 
-		expect( wrapper.instance().state.isDirty ).toBeFalsy();
+		//Simulate blur event
+		fireEvent( htmlTextInput, 'blur' );
+
+		// Check that onPersist is not called for non-dirty state
+		expect( onPersist ).toHaveBeenCalledTimes( 1 );
 
 		//We expect state.value is getting propagated from prop.value
-		expect( wrapper.instance().state.value ).toEqual( 'text' );
+		expect( screen.getByDisplayValue( 'text' ) ).toBeDefined();
 	} );
 
 	it( 'HTMLTextInput propagates title changes to store', () => {
 		const editTitle = jest.fn();
 
-		const wrapper = shallow(
+		const screen = render(
 			<HTMLTextInput
 				editTitle={ editTitle }
 				getStylesFromColorScheme={ getStylesFromColorScheme }
@@ -109,8 +108,8 @@ describe( 'HTMLTextInput', () => {
 		);
 
 		// Simulate user typing text
-		const textInput = findTitleTextInput( wrapper );
-		textInput.simulate( 'changeText', 'text' );
+		const textInput = findTitleTextInput( screen );
+		fireEvent( textInput, 'changeText', 'text' );
 
 		//Check if the setTitleAction is called
 		expect( editTitle ).toHaveBeenCalledTimes( 1 );

package/src/mobile/inserter-button/style.native.scss

@@ -42,6 +42,7 @@
 	padding-top: 4;
 	padding-bottom: 0;
 	justify-content: center;
+	text-align: center;
 	font-size: 12;
 	color: $gray-dark;
 }

package/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -51,20 +51,23 @@ export const KeyboardAvoidingView = ( {
 				setSafeAreaBottomInset( safeAreaInsets.bottom );
 			}
 		);
-		SafeArea.addEventListener(
+		const safeAreaSubscription = SafeArea.addEventListener(
 			'safeAreaInsetsForRootViewDidChange',
 			onSafeAreaInsetsUpdate
 		);
-		Keyboard.addListener( 'keyboardWillShow', onKeyboardWillShow );
-		Keyboard.addListener( 'keyboardWillHide', onKeyboardWillHide );
+		const keyboardShowSubscription = Keyboard.addListener(
+			'keyboardWillShow',
+			onKeyboardWillShow
+		);
+		const keyboardHideSubscription = Keyboard.addListener(
+			'keyboardWillHide',
+			onKeyboardWillHide
+		);
 
 		return () => {
-			SafeArea.removeEventListener(
-				'safeAreaInsetsForRootViewDidChange',
-				onSafeAreaInsetsUpdate
-			);
-			Keyboard.removeListener( 'keyboardWillShow', onKeyboardWillShow );
-			Keyboard.removeListener( 'keyboardWillHide', onKeyboardWillHide );
+			safeAreaSubscription.remove();
+			keyboardShowSubscription.remove();
+			keyboardHideSubscription.remove();
 		};
 	}, [] );
 

package/src/mobile/link-picker/index.native.js

@@ -2,15 +2,16 @@
  * External dependencies
  */
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 import { lowerCase, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { BottomSheet, Icon } from '@wordpress/components';
-import { getProtocol, prependHTTP } from '@wordpress/url';
+import { getProtocol, isURL, prependHTTP } from '@wordpress/url';
 import { link, cancelCircleFilled } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -47,12 +48,20 @@ export const createDirectEntry = ( value ) => {
 	};
 };
 
+const getURLFromClipboard = async () => {
+	const text = await Clipboard.getString();
+	return !! text && isURL( text ) ? text : '';
+};
+
 export const LinkPicker = ( {
 	value: initialValue,
 	onLinkPicked,
 	onCancel: cancel,
 } ) => {
-	const [ value, setValue ] = useState( initialValue );
+	const [ { value, clipboardUrl }, setValue ] = useState( {
+		value: initialValue,
+		clipboardUrl: '',
+	} );
 	const directEntry = createDirectEntry( value );
 
 	// the title of a direct entry is displayed as the raw input value, but if we
@@ -66,7 +75,7 @@ export const LinkPicker = ( {
 	};
 
 	const clear = () => {
-		setValue( '' );
+		setValue( { value: '', clipboardUrl } );
 	};
 
 	const omniCellStyle = usePreferredColorSchemeStyle(
@@ -79,6 +88,14 @@ export const LinkPicker = ( {
 		styles.iconDark
 	);
 
+	useEffect( () => {
+		getURLFromClipboard()
+			.then( ( url ) => setValue( { value, clipboardUrl: url } ) )
+			.catch( () => setValue( { value, clipboardUrl: '' } ) );
+	}, [] );
+
+	// TODO: Localize the accessibility label.
+	// TODO: Decide on if `LinkSuggestionItemCell` with `isDirectEntry` makes sense.
 	return (
 		<SafeAreaView style={ styles.safeArea }>
 			<NavBar>
@@ -96,7 +113,9 @@ export const LinkPicker = ( {
 					autoCapitalize="none"
 					autoCorrect={ false }
 					keyboardType="url"
-					onChangeValue={ setValue }
+					onChangeValue={ ( newValue ) => {
+						setValue( { value: newValue, clipboardUrl } );
+					} }
 					onSubmit={ onSubmit }
 					/* eslint-disable-next-line jsx-a11y/no-autofocus */
 					autoFocus
@@ -115,6 +134,22 @@ export const LinkPicker = ( {
 						</TouchableOpacity>
 					) }
 				</BottomSheet.Cell>
+				{ !! clipboardUrl && clipboardUrl !== value && (
+					<BottomSheet.LinkSuggestionItemCell
+						accessible
+						accessibilityLabel={ sprintf(
+							/* translators: Copy URL from the clipboard, https://sample.url */
+							__( 'Copy URL from the clipboard, %s' ),
+							clipboardUrl
+						) }
+						suggestion={ {
+							type: 'clipboard',
+							url: clipboardUrl,
+							isDirectEntry: true,
+						} }
+						onLinkPicked={ pickLink }
+					/>
+				) }
 				{ !! value && (
 					<LinkPickerResults
 						query={ value }

package/src/mobile/link-picker/link-picker-screen.native.js

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
+import { Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,14 +20,20 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 	const route = useRoute();
 
 	const onLinkPicked = ( { url, title } ) => {
-		navigation.navigate( returnScreenName, {
-			inputValue: url,
-			text: title,
-		} );
+		Keyboard.dismiss();
+		delay( () => {
+			navigation.navigate( returnScreenName, {
+				inputValue: url,
+				text: title,
+			} );
+		}, 100 );
 	};
 
 	const onCancel = () => {
-		navigation.goBack();
+		Keyboard.dismiss();
+		delay( () => {
+			navigation.goBack();
+		}, 100 );
 	};
 
 	const { inputValue } = route.params;