FocalPointPicker warning: Received NaN for the value attribute.

[kienstra]

Describe the bug

When plugins use the FocalPointPicker component and the FocalPointPicker displays for the first time, it looks to cause a console warning. This isn't present at all without the FocalPointPicker:

react-dom.165d5c53.js:500 Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.
    in input
    in div (created by De)
    in div (created by De)
    in De
    in Unknown (created by WithState(Component))
    in WithState(Component) (created by WithInstanceId(WithState(Component)))
    in WithInstanceId(WithState(Component)) (created by t)
    in div (created by t)
    in t (created by ForwardRef(PanelBody))
    in ForwardRef(PanelBody) (created by t)
    in t (created by Context.Consumer)
    in se (created by InspectorControlsSlot)
    in InspectorControlsSlot
    in div
    in Unknown (created by n)
    in n (created by Context.Consumer)
    in WithSelect(Component)
    in div (created by t)
    in t (created by ForwardRef(PanelBody))
    in ForwardRef(PanelBody)
    in div (created by sn)
    in sn
    in div (created by sn)
    in sn (created by n)
    in div (created by n)
    in n (created by Context.Consumer)
    in Unknown (created by b)
    in b
    in t (created by Context.Consumer)
    in se (created by SidebarSlot)
    in SidebarSlot
    in div (created by t)
    in t
    in Unknown (created by n)
    in n (created by Context.Consumer)
    in WithViewportMatch(Component) (created by NavigateRegions(WithViewportMatch(Component)))
    in div (created by NavigateRegions(WithViewportMatch(Component)))
    in NavigateRegions(WithViewportMatch(Component)) (created by r)
    in r (created by Context.Consumer)
    in WithDispatch(NavigateRegions(WithViewportMatch(Component))) (created by n)
    in n (created by Context.Consumer)
    in WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Component)))) (created by t)
    in t (created by t)
    in div (created by t)
    in t (created by t)
    in t (created by t)
    in t (created by r)
    in r (created by Context.Consumer)
    in WithDispatch(t)
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(WithDispatch(t)) (created by t)
    in t (created by r)
    in r (created by Context.Consumer)
    in WithDispatch(t) (created by n)
    in n (created by Context.Consumer)
    in WithSelect(WithDispatch(t)) (created by t)
    in StrictMode (created by t)
    in t (created by n)
    in n (created by Context.Consumer)
    in WithSelect(t)

To reproduce

With AMP Plugin

1. Install the AMP plugin by running git clone -b amp-stories-redux https://github.com/ampproject/amp-wp.git amp
2. Possibly ssh into your environment, and cd to the amp/ directory
3. composer install && npm install && npm run dev
4. wp plugin activate amp
5. In /wp-admin > AMP, check "Enable experimental support for AMP Stories." (or go to /wp-admin/admin.php?page=amp-options)
6. In the admin bar, click New > AMP Story
7. Click the page, click Background Media > Select Media, select an image
8. Expected: there is no console warning
9. Actual: there is a console warning, as shown above. Here's the location of the FocalPointPicker.

With CoBlocks Plugin

1. Download and activate the CoBlocks plugin
2. Create a new post
3. Add a "Media Card" block
4. Add a background image
   
5. Expected: there's no console warning
6. Actual: there's a similar warning to the one in the AMP plugin. Here's the location of the FocalPointPicker.

react-dom.165d5c53.js:500 Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.
    in input
    in div (created by De)
    in div (created by De)
    in De
    in Unknown (created by WithState(Component))
    in WithState(Component) (created by WithInstanceId(WithState(Component)))
    in WithInstanceId(WithState(Component)) (created by t)
    in div (created by t)
    in t (created by ForwardRef(PanelBody))
    in ForwardRef(PanelBody) (created by t)
    in t (created by Context.Consumer)
    in se (created by InspectorControlsSlot)
    in InspectorControlsSlot
    in div
    in Unknown (created by n)
    in n (created by Context.Consumer)
    in WithSelect(Component)
    in div (created by t)
    in t (created by ForwardRef(PanelBody))
    in ForwardRef(PanelBody)
    in div (created by sn)
    in sn
    in div (created by sn)
    in sn (created by n)
    in div (created by n)
    in n (created by Context.Consumer)
    in Unknown (created by b)
    in b
    in t (created by Context.Consumer)
    in se (created by SidebarSlot)
    in SidebarSlot
    in div (created by t)
    in t
    in Unknown (created by n)
    in n (created by Context.Consumer)
    in WithViewportMatch(Component) (created by NavigateRegions(WithViewportMatch(Component)))
    in div (created by NavigateRegions(WithViewportMatch(Component)))
    in NavigateRegions(WithViewportMatch(Component)) (created by r)
    in r (created by Context.Consumer)
    in WithDispatch(NavigateRegions(WithViewportMatch(Component))) (created by n)
    in n (created by Context.Consumer)
    in WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Component)))) (created by t)
    in t (created by t)
    in div (created by t)
    in t (created by t)
    in t (created by t)
    in t (created by r)
    in r (created by Context.Consumer)
    in WithDispatch(t)
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(WithDispatch(t)) (created by t)
    in t (created by r)
    in r (created by Context.Consumer)
    in WithDispatch(t) (created by n)
    in n (created by Context.Consumer)
    in WithSelect(WithDispatch(t)) (created by t)
    in StrictMode (created by t)
    in t (created by n)
    in n (created by Context.Consumer)
    in WithSelect(t)

Expected behavior
There should be no console warning. Though otherwise, this works fine.

Desktop

• OS: MacOS 10.13.6 (17G65)
• Browser: Chrome 73.0.3683.103 (Official Build) (64-bit)

Additional context
Gutenberg Version: 5.5.0

[swissspidy]

The issue might be that these plugins pass some value to the FocalPointPicker that is undefined or null, causing the component's defaultProps not to take effect. In this case the value prop should not be passed at all, or always be a proper object.

[westonruter]

The issue seems to be that the default state for percentages is an empty object, when instead it needs to be the default value of { x:0.5, y:0.5 }. See #15400.