Merge pull request #2824 from JedWatson/v2-redistribute-innerRef

V2 redistribute inner ref

docs/pages/components/index.js

@@ -53,6 +53,16 @@ export default function Components() {
         property. These components are given all the current props and state
         letting you achieve anything you dream up.
 
+        ## Inner Ref
+        Some components also take an innerRef prop that react-select needs in
+        order to manage internal behaviour. Please assign this to the ref
+        property of the relevant react-element. For example:
+
+        ~~~~
+        const CustomOption = ({ innerRef, innerProps }) => (
+        <div ref={innerRef} {...innerProps} />)
+        ~~~~
+
         ### Inner Props
 
         All functional properties that the component needs are provided in

docs/pages/props/index.js

@@ -112,6 +112,17 @@ export default function Api() {
     letting you achieve anything you dream up. For more information in replacing
     components see [the components documentation](/components)
 
+    ### Inner Ref
+    Some components are passed an innerRef property to facilitate for internally
+    managed behaviour within the base select. This should be assigned to the
+    ref property of the relevant dom element.
+    i.e.
+
+    ~~~
+    const CustomOptionComponent = ({ innerProps, innerRef }) =>
+    (<div ref={innerRef} {...innerProps} />)
+    ~~~
+
     ### Inner Props
 
     All functional properties that the component needs are provided in

docs/pages/upgradeGuide/index.js

@@ -195,7 +195,7 @@ For example, to render a custom \`Option\` component:
 ~~~js
 components={{
   Option: ({ children, innerProps }) => (
-    <div className="custom-option" {...innerProps}>
+    <div className="custom-option" ref={innerRef} {...innerProps}>
       {children}
     </div>
   )
@@ -213,8 +213,12 @@ understand are:
 * \`getStyles\` - a function that will return an object containing the styles
   for the component. If you have specified custom style modifiers, they will be
   executed by this function.
+* \`innerRef\` - additional some components need to expose a ref to
+  the base Select component, to facilitate internally managed behaviour.
+  We specify this as innerRef to avoid collision with React's reserved \`ref\`
+  keyword when we spread props.
 
-You don't _have_ to use these props, and are free to implement whatever - but
+Aside from innerRef (where applicable), you don't _have_ to use these props, and are free to implement whatever - but
 they are intended to help make custom implementations easier to manage.
 
 See the [Components Documentation](/components) for more details and

src/Select.js

@@ -1537,7 +1537,7 @@ export default class Select extends Component<Props, State> {
       // for performance, the menu options in state aren't changed when the
       // focused option changes so we calculate additional props based on that
       const isFocused = focusedOption === props.data;
-      props.innerProps.innerRef = isFocused
+      props.innerRef = isFocused
         ? this.getFocusedOptionRef
         : undefined;
 
@@ -1606,9 +1606,7 @@ export default class Select extends Component<Props, State> {
             <ScrollBlock isEnabled={menuShouldBlockScroll}>
               <MenuList
                 {...commonProps}
-                innerProps={{
-                  innerRef: this.getMenuListRef,
-                }}
+                innerRef={this.getMenuListRef}
                 isLoading={isLoading}
                 maxHeight={maxMenuHeight}
               >
@@ -1706,8 +1704,8 @@ export default class Select extends Component<Props, State> {
         {this.renderLiveRegion()}
         <Control
           {...commonProps}
+          innerRef={this.getControlRef}
           innerProps={{
-            innerRef: this.getControlRef,
             onMouseDown: this.onControlMouseDown,
             onTouchEnd: this.onControlTouchEnd,
           }}

src/__tests__/__snapshots__/Async.test.js.snap

@@ -148,11 +148,11 @@ exports[`defaults - snapshot 1`] = `
             hasValue={false}
             innerProps={
               Object {
-                "innerRef": [Function],
                 "onMouseDown": [Function],
                 "onTouchEnd": [Function],
               }
             }
+            innerRef={[Function]}
             isDisabled={false}
             isFocused={false}
             isMulti={false}

src/__tests__/__snapshots__/AsyncCreatable.test.js.snap

@@ -180,11 +180,11 @@ exports[`defaults - snapshot 1`] = `
               hasValue={false}
               innerProps={
                 Object {
-                  "innerRef": [Function],
                   "onMouseDown": [Function],
                   "onTouchEnd": [Function],
                 }
               }
+              innerRef={[Function]}
               isDisabled={false}
               isFocused={false}
               isMulti={false}

src/__tests__/__snapshots__/Select.test.js.snap

@@ -69,11 +69,11 @@ exports[`snapshot - defaults 1`] = `
     hasValue={false}
     innerProps={
       Object {
-        "innerRef": [Function],
         "onMouseDown": [Function],
         "onTouchEnd": [Function],
       }
     }
+    innerRef={[Function]}
     isDisabled={false}
     isFocused={false}
     isMulti={false}

src/components/Control.js

@@ -17,10 +17,10 @@ export type ControlProps = CommonProps &
   State & {
     /** Children to render. */
     children: Node,
+    innerRef: ElementRef<*>,
     /** The mouse down event and the innerRef to pass down to the controller element. */
     innerProps: {
       onMouseDown: (SyntheticMouseEvent<HTMLElement>) => void,
-      innerRef: ElementRef<*>,
     },
   };
 
@@ -51,8 +51,7 @@ export const css = ({ isDisabled, isFocused }: State) => ({
 });
 
 const Control = (props: ControlProps) => {
-  const { children, cx, getStyles, className, isDisabled, isFocused, innerProps } = props;
-  const { innerRef, ...rest } = innerProps;
+  const { children, cx, getStyles, className, isDisabled, isFocused, innerRef, innerProps } = props;
   return (
     <div
       ref={innerRef}
@@ -61,7 +60,7 @@ const Control = (props: ControlProps) => {
         'control--is-disabled': isDisabled,
         'control--is-focused': isFocused
       }, className)}
-      {...rest}
+      {...innerProps}
     >
       {children}
     </div>

src/components/Menu.js

@@ -319,7 +319,7 @@ export type MenuListProps = {
   /** The children to be rendered. */
   children: Node,
   /** Inner ref to DOM Node */
-  innerProps: { innerRef: InnerRef },
+  innerRef: InnerRef,
 };
 export type MenuListComponentProps = CommonProps &
   MenuListProps &
@@ -333,8 +333,7 @@ export const menuListCSS = ({ maxHeight }: MenuState) => ({
   WebkitOverflowScrolling: 'touch',
 });
 export const MenuList = (props: MenuListComponentProps) => {
-  const { children, className, cx, getStyles, isMulti, innerProps } = props;
-  const { innerRef } = innerProps;
+  const { children, className, cx, getStyles, isMulti, innerRef } = props;
   return (
     <div
       className={cx(

src/components/Option.js

@@ -15,7 +15,6 @@ type State = {
 };
 type InnerProps = {
   id: string,
-  innerRef: InnerRef,
   key: string,
   onClick: MouseEventHandler,
   onMouseOver: MouseEventHandler,
@@ -26,6 +25,8 @@ export type OptionProps = PropsWithStyles &
   State & {
     /** The children to be rendered. */
     children: Node,
+    /** Inner ref to DOM Node */
+    innerRef: InnerRef,
     /** props passed to the wrapping element for the group. */
     innerProps: InnerProps,
     /* Text to be displayed representing the option. */
@@ -57,8 +58,7 @@ export const optionCSS = ({ isDisabled, isFocused, isSelected }: State) => ({
 });
 
 const Option = (props: OptionProps) => {
-  const { children, className, cx, getStyles, isDisabled, isFocused, isSelected, innerProps } = props;
-  const { innerRef, ...rest } = innerProps;
+  const { children, className, cx, getStyles, isDisabled, isFocused, isSelected, innerRef, innerProps } = props;
   return (
     <div
       ref={innerRef}
@@ -72,7 +72,7 @@ const Option = (props: OptionProps) => {
         },
         className
       )}
-      {...rest}
+      {...innerProps}
     >
       {children}
     </div>