Fix non-selfclosing JSX tag contextual types (#27251)

Author: weswigham

src/compiler/checker.ts

@@ -16827,6 +16827,12 @@ namespace ts {
         }
 
         function getContextualJsxElementAttributesType(node: JsxOpeningLikeElement) {
+            if (isJsxOpeningElement(node) && node.parent.contextualType) {
+                // Contextually applied type is moved from attributes up to the outer jsx attributes so when walking up from the children they get hit
+                // _However_ to hit them from the _attributes_ we must look for them here; otherwise we'll used the declared type
+                // (as below) instead!
+                return node.parent.contextualType;
+            }
             if (isJsxIntrinsicIdentifier(node.tagName)) {
                 return getIntrinsicAttributesTypeFromJsxOpeningLikeElement(node);
             }

tests/baselines/reference/jsxChildrenGenericContextualTypes.errors.txt

@@ -1,14 +1,13 @@
 tests/cases/compiler/jsxChildrenGenericContextualTypes.tsx(20,46): error TS2322: Type '"y"' is not assignable to type '"x"'.
-tests/cases/compiler/jsxChildrenGenericContextualTypes.tsx(21,19): error TS2322: Type '{ children: (p: IntrinsicAttributes & LitProps<"x">) => "y"; prop: "x"; }' is not assignable to type 'IntrinsicAttributes & LitProps<"x" | "y">'.
-  Type '{ children: (p: IntrinsicAttributes & LitProps<"x">) => "y"; prop: "x"; }' is not assignable to type 'LitProps<"x" | "y">'.
+tests/cases/compiler/jsxChildrenGenericContextualTypes.tsx(21,19): error TS2322: Type '{ children: (p: LitProps<"x">) => "y"; prop: "x"; }' is not assignable to type 'IntrinsicAttributes & LitProps<"x" | "y">'.
+  Type '{ children: (p: LitProps<"x">) => "y"; prop: "x"; }' is not assignable to type 'LitProps<"x" | "y">'.
     Types of property 'children' are incompatible.
-      Type '(p: IntrinsicAttributes & LitProps<"x">) => "y"' is not assignable to type '(x: LitProps<"x" | "y">) => "x" | "y"'.
+      Type '(p: LitProps<"x">) => "y"' is not assignable to type '(x: LitProps<"x" | "y">) => "x" | "y"'.
         Types of parameters 'p' and 'x' are incompatible.
-          Type 'LitProps<"x" | "y">' is not assignable to type 'IntrinsicAttributes & LitProps<"x">'.
-            Type 'LitProps<"x" | "y">' is not assignable to type 'LitProps<"x">'.
-              Types of property 'prop' are incompatible.
-                Type '"x" | "y"' is not assignable to type '"x"'.
-                  Type '"y"' is not assignable to type '"x"'.
+          Type 'LitProps<"x" | "y">' is not assignable to type 'LitProps<"x">'.
+            Types of property 'prop' are incompatible.
+              Type '"x" | "y"' is not assignable to type '"x"'.
+                Type '"y"' is not assignable to type '"x"'.
 tests/cases/compiler/jsxChildrenGenericContextualTypes.tsx(22,21): error TS2322: Type '{ children: () => number; prop: "x"; }' is not assignable to type 'IntrinsicAttributes & LitProps<"x">'.
   Type '{ children: () => number; prop: "x"; }' is not assignable to type 'LitProps<"x">'.
     Types of property 'children' are incompatible.
@@ -42,16 +41,15 @@ tests/cases/compiler/jsxChildrenGenericContextualTypes.tsx(22,21): error TS2322:
 !!! related TS6502 tests/cases/compiler/jsxChildrenGenericContextualTypes.tsx:13:44: The expected type comes from the return type of this signature.
     const argchild = <ElemLit prop="x">{p => "y"}</ElemLit>
                       ~~~~~~~
-!!! error TS2322: Type '{ children: (p: IntrinsicAttributes & LitProps<"x">) => "y"; prop: "x"; }' is not assignable to type 'IntrinsicAttributes & LitProps<"x" | "y">'.
-!!! error TS2322:   Type '{ children: (p: IntrinsicAttributes & LitProps<"x">) => "y"; prop: "x"; }' is not assignable to type 'LitProps<"x" | "y">'.
+!!! error TS2322: Type '{ children: (p: LitProps<"x">) => "y"; prop: "x"; }' is not assignable to type 'IntrinsicAttributes & LitProps<"x" | "y">'.
+!!! error TS2322:   Type '{ children: (p: LitProps<"x">) => "y"; prop: "x"; }' is not assignable to type 'LitProps<"x" | "y">'.
 !!! error TS2322:     Types of property 'children' are incompatible.
-!!! error TS2322:       Type '(p: IntrinsicAttributes & LitProps<"x">) => "y"' is not assignable to type '(x: LitProps<"x" | "y">) => "x" | "y"'.
+!!! error TS2322:       Type '(p: LitProps<"x">) => "y"' is not assignable to type '(x: LitProps<"x" | "y">) => "x" | "y"'.
 !!! error TS2322:         Types of parameters 'p' and 'x' are incompatible.
-!!! error TS2322:           Type 'LitProps<"x" | "y">' is not assignable to type 'IntrinsicAttributes & LitProps<"x">'.
-!!! error TS2322:             Type 'LitProps<"x" | "y">' is not assignable to type 'LitProps<"x">'.
-!!! error TS2322:               Types of property 'prop' are incompatible.
-!!! error TS2322:                 Type '"x" | "y"' is not assignable to type '"x"'.
-!!! error TS2322:                   Type '"y"' is not assignable to type '"x"'.
+!!! error TS2322:           Type 'LitProps<"x" | "y">' is not assignable to type 'LitProps<"x">'.
+!!! error TS2322:             Types of property 'prop' are incompatible.
+!!! error TS2322:               Type '"x" | "y"' is not assignable to type '"x"'.
+!!! error TS2322:                 Type '"y"' is not assignable to type '"x"'.
     const mismatched = <ElemLit prop="x">{() => 12}</ElemLit>
                         ~~~~~~~
 !!! error TS2322: Type '{ children: () => number; prop: "x"; }' is not assignable to type 'IntrinsicAttributes & LitProps<"x">'.

tests/baselines/reference/jsxChildrenGenericContextualTypes.types

@@ -127,8 +127,8 @@ const argchild = <ElemLit prop="x">{p => "y"}</ElemLit>
 ><ElemLit prop="x">{p => "y"}</ElemLit> : JSX.Element
 >ElemLit : <T extends string>(p: LitProps<T>) => JSX.Element
 >prop : "x"
->p => "y" : (p: JSX.IntrinsicAttributes & LitProps<"x">) => "y"
->p : JSX.IntrinsicAttributes & LitProps<"x">
+>p => "y" : (p: LitProps<"x">) => "y"
+>p : LitProps<"x">
 >"y" : "y"
 >ElemLit : <T extends string>(p: LitProps<T>) => JSX.Element
 

tests/baselines/reference/reactDefaultPropsInferenceSuccess.errors.txt

@@ -1,16 +1,21 @@
-tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx(26,36): error TS2322: Type '(value: string) => void' is not assignable to type '(value: string) => boolean'.
-  Type 'void' is not assignable to type 'boolean'.
-tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx(48,37): error TS2322: Type '(value: string) => void' is not assignable to type '(value: string) => boolean'.
+tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx(27,36): error TS2322: Type '(value: string) => void' is not assignable to type '"a" | "b" | ((value: string) => boolean) | undefined'.
+  Type '(value: string) => void' is not assignable to type '(value: string) => boolean'.
+    Type 'void' is not assignable to type 'boolean'.
+tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx(43,41): error TS2322: Type '(value: string) => void' is not assignable to type '"a" | "b" | ((value: string) => boolean) | undefined'.
+  Type '(value: string) => void' is not assignable to type '(value: string) => boolean'.
+    Type 'void' is not assignable to type 'boolean'.
+tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx(64,37): error TS2322: Type '(value: string) => void' is not assignable to type '(value: string) => boolean'.
   Type 'void' is not assignable to type 'boolean'.
 
 
-==== tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx (2 errors) ====
+==== tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx (3 errors) ====
     /// <reference path="/.lib/react16.d.ts" />
 
     import React from 'react';
 
     interface BaseProps {
-      when?: (value: string) => boolean;
+      when?: ((value: string) => boolean) | "a" | "b";
+      error?: boolean;
     }
 
     interface Props extends BaseProps {
@@ -32,10 +37,31 @@ tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx(48,37): error TS2322:
     // Error: Void not assignable to boolean
     const Test2 = () => <FieldFeedback when={value => console.log(value)} />;
                                        ~~~~
-!!! error TS2322: Type '(value: string) => void' is not assignable to type '(value: string) => boolean'.
-!!! error TS2322:   Type 'void' is not assignable to type 'boolean'.
-!!! related TS6500 tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx:6:3: The expected type comes from property 'when' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FieldFeedback<Props>> & Pick<Readonly<{ children?: ReactNode; }> & Readonly<Props>, "children"> & Partial<Pick<Readonly<{ children?: ReactNode; }> & Readonly<Props>, "when">> & Partial<Pick<{ when: () => boolean; }, never>>'
+!!! error TS2322: Type '(value: string) => void' is not assignable to type '"a" | "b" | ((value: string) => boolean) | undefined'.
+!!! error TS2322:   Type '(value: string) => void' is not assignable to type '(value: string) => boolean'.
+!!! error TS2322:     Type 'void' is not assignable to type 'boolean'.
+!!! related TS6500 tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx:6:3: The expected type comes from property 'when' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FieldFeedback<Props>> & Pick<Readonly<{ children?: ReactNode; }> & Readonly<Props>, "children" | "error"> & Partial<Pick<Readonly<{ children?: ReactNode; }> & Readonly<Props>, "when">> & Partial<Pick<{ when: () => boolean; }, never>>'
+    
+    class FieldFeedbackBeta<P extends Props = BaseProps> extends React.Component<P> {
+      static defaultProps: BaseProps = {
+        when: () => true
+      };
+    
+      render() {
+        return <div>Hello</div>;
+      }
+    }
 
+    // OK
+    const Test1a = () => <FieldFeedbackBeta when={value => !!value} error>Hah</FieldFeedbackBeta>;
+    
+    // Error: Void not assignable to boolean
+    const Test2a = () => <FieldFeedbackBeta when={value => console.log(value)} error>Hah</FieldFeedbackBeta>;
+                                            ~~~~
+!!! error TS2322: Type '(value: string) => void' is not assignable to type '"a" | "b" | ((value: string) => boolean) | undefined'.
+!!! error TS2322:   Type '(value: string) => void' is not assignable to type '(value: string) => boolean'.
+!!! error TS2322:     Type 'void' is not assignable to type 'boolean'.
+!!! related TS6500 tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx:6:3: The expected type comes from property 'when' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FieldFeedbackBeta<Props>> & Pick<Readonly<{ children?: ReactNode; }> & Readonly<Props>, "children"> & Partial<Pick<Readonly<{ children?: ReactNode; }> & Readonly<Props>, "when" | "error">> & Partial<Pick<BaseProps, never>>'
 
     interface MyPropsProps extends Props {
       when: (value: string) => boolean;
@@ -60,7 +86,7 @@ tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx(48,37): error TS2322:
                                         ~~~~
 !!! error TS2322: Type '(value: string) => void' is not assignable to type '(value: string) => boolean'.
 !!! error TS2322:   Type 'void' is not assignable to type 'boolean'.
-!!! related TS6500 tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx:30:3: The expected type comes from property 'when' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FieldFeedback2<MyPropsProps>> & Pick<Readonly<{ children?: ReactNode; }> & Readonly<MyPropsProps>, "children"> & Partial<Pick<Readonly<{ children?: ReactNode; }> & Readonly<MyPropsProps>, "when">> & Partial<Pick<{ when: () => boolean; }, never>>'
+!!! related TS6500 tests/cases/compiler/reactDefaultPropsInferenceSuccess.tsx:46:3: The expected type comes from property 'when' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FieldFeedback2<MyPropsProps>> & Pick<Readonly<{ children?: ReactNode; }> & Readonly<MyPropsProps>, "children" | "error"> & Partial<Pick<Readonly<{ children?: ReactNode; }> & Readonly<MyPropsProps>, "when">> & Partial<Pick<{ when: () => boolean; }, never>>'
 
     // OK
     const Test5 = () => <FieldFeedback2 />;

tests/baselines/reference/reactDefaultPropsInferenceSuccess.js

@@ -4,7 +4,8 @@
 import React from 'react';
 
 interface BaseProps {
-  when?: (value: string) => boolean;
+  when?: ((value: string) => boolean) | "a" | "b";
+  error?: boolean;
 }
 
 interface Props extends BaseProps {
@@ -26,6 +27,21 @@ const Test1 = () => <FieldFeedback when={value => !!value} />;
 // Error: Void not assignable to boolean
 const Test2 = () => <FieldFeedback when={value => console.log(value)} />;
 
+class FieldFeedbackBeta<P extends Props = BaseProps> extends React.Component<P> {
+  static defaultProps: BaseProps = {
+    when: () => true
+  };
+
+  render() {
+    return <div>Hello</div>;
+  }
+}
+
+// OK
+const Test1a = () => <FieldFeedbackBeta when={value => !!value} error>Hah</FieldFeedbackBeta>;
+
+// Error: Void not assignable to boolean
+const Test2a = () => <FieldFeedbackBeta when={value => console.log(value)} error>Hah</FieldFeedbackBeta>;
 
 interface MyPropsProps extends Props {
   when: (value: string) => boolean;
@@ -90,6 +106,23 @@ var FieldFeedback = /** @class */ (function (_super) {
 var Test1 = function () { return react_1["default"].createElement(FieldFeedback, { when: function (value) { return !!value; } }); };
 // Error: Void not assignable to boolean
 var Test2 = function () { return react_1["default"].createElement(FieldFeedback, { when: function (value) { return console.log(value); } }); };
+var FieldFeedbackBeta = /** @class */ (function (_super) {
+    __extends(FieldFeedbackBeta, _super);
+    function FieldFeedbackBeta() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FieldFeedbackBeta.prototype.render = function () {
+        return react_1["default"].createElement("div", null, "Hello");
+    };
+    FieldFeedbackBeta.defaultProps = {
+        when: function () { return true; }
+    };
+    return FieldFeedbackBeta;
+}(react_1["default"].Component));
+// OK
+var Test1a = function () { return react_1["default"].createElement(FieldFeedbackBeta, { when: function (value) { return !!value; }, error: true }, "Hah"); };
+// Error: Void not assignable to boolean
+var Test2a = function () { return react_1["default"].createElement(FieldFeedbackBeta, { when: function (value) { return console.log(value); }, error: true }, "Hah"); };
 var FieldFeedback2 = /** @class */ (function (_super) {
     __extends(FieldFeedback2, _super);
     function FieldFeedback2() {