Restore keyboard interaction after Popover introduction.

WordPress · Aug 3, 2017 · 84d7587 · 84d7587
1 parent d2d3765
commit 84d7587
Showing 1 changed file with 46 additions and 43 deletions.
diff --git a/editor/sidebar/post-visibility/index.js b/editor/sidebar/post-visibility/index.js
@@ -139,54 +139,57 @@ class PostVisibility extends Component {
 						<Popover
 							position="bottom left"
 							className="editor-post-visibility__dialog"
-							onKeyDown={ this.handleKeyDown }
-							onBlur={ this.handleBlur }
-							ref={ dialog => this.dialog = dialog }
 						>
-							<fieldset>
-								<legend className="editor-post-visibility__dialog-legend">
-									{ __( 'Post Visibility' ) }
-								</legend>
-								{ visibilityOptions.map( ( { value, label, info, onSelect, checked } ) => (
-									<div key={ value } className="editor-post-visibility__choice">
-										<input
-											type="radio"
-											name={ `editor-post-visibility__setting-${ instanceId }` }
-											value={ value }
-											onChange={ onSelect }
-											checked={ checked }
-											id={ `editor-post-${ value }-${ instanceId }` }
-											aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
-											className="editor-post-visibility__dialog-radio"
-										/>
+							<div
+								onKeyDown={ this.handleKeyDown }
+								onBlur={ this.handleBlur }
+								ref={ dialog => this.dialog = dialog }
+							>
+								<fieldset>
+									<legend className="editor-post-visibility__dialog-legend">
+										{ __( 'Post Visibility' ) }
+									</legend>
+									{ visibilityOptions.map( ( { value, label, info, onSelect, checked } ) => (
+										<div key={ value } className="editor-post-visibility__choice">
+											<input
+												type="radio"
+												name={ `editor-post-visibility__setting-${ instanceId }` }
+												value={ value }
+												onChange={ onSelect }
+												checked={ checked }
+												id={ `editor-post-${ value }-${ instanceId }` }
+												aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
+												className="editor-post-visibility__dialog-radio"
+											/>
+											<label
+												htmlFor={ `editor-post-${ value }-${ instanceId }` }
+												className="editor-post-visibility__dialog-label"
+											>
+												{ label }
+											</label>
+											{ <p id={ `editor-post-${ value }-${ instanceId }-description` } className="editor-post-visibility__dialog-info">{ info }</p> }
+										</div>
+									) ) }
+								</fieldset>
+								{ this.state.hasPassword &&
+									<div className="editor-post-visibility__dialog-password">
 										<label
-											htmlFor={ `editor-post-${ value }-${ instanceId }` }
-											className="editor-post-visibility__dialog-label"
+											htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
+											className="screen-reader-text"
 										>
-											{ label }
+											{ __( 'Create password' ) }
 										</label>
-										{ <p id={ `editor-post-${ value }-${ instanceId }-description` } className="editor-post-visibility__dialog-info">{ info }</p> }
+										<input
+											className="editor-post-visibility__dialog-password-input"
+											id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
+											type="text"
+											onChange={ updatePassword }
+											value={ password || '' }
+											placeholder={ __( 'Use a secure password' ) }
+										/>
 									</div>
-								) ) }
-							</fieldset>
-							{ this.state.hasPassword &&
-								<div className="editor-post-visibility__dialog-password">
-									<label
-										htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-										className="screen-reader-text"
-									>
-										{ __( 'Create password' ) }
-									</label>
-									<input
-										className="editor-post-visibility__dialog-password-input"
-										id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-										type="text"
-										onChange={ updatePassword }
-										value={ password || '' }
-										placeholder={ __( 'Use a secure password' ) }
-									/>
-								</div>
-							}
+								}
+							</div>
 						</Popover>
 					}
 				</span>