From 460d1e2e82e05e93f6beb3e6b586041fdbd6c3f9 Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wwigham@gmail.com>
Date: Wed, 10 Aug 2022 10:13:34 -0700
Subject: [PATCH] Forward intersectionState flag when comparing indexed access
 constraints

---
 src/compiler/checker.ts                       |  2 +-
 .../jsxIntrinsicElementsCompatability.js      | 24 ++++++++++++++
 .../jsxIntrinsicElementsCompatability.symbols | 33 +++++++++++++++++++
 .../jsxIntrinsicElementsCompatability.types   | 28 ++++++++++++++++
 .../jsxIntrinsicElementsCompatability.tsx     | 12 +++++++
 5 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 tests/baselines/reference/jsxIntrinsicElementsCompatability.js
 create mode 100644 tests/baselines/reference/jsxIntrinsicElementsCompatability.symbols
 create mode 100644 tests/baselines/reference/jsxIntrinsicElementsCompatability.types
 create mode 100644 tests/cases/compiler/jsxIntrinsicElementsCompatability.tsx

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index f95addbaddae8..8e730695f5768 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -19658,7 +19658,7 @@ namespace ts {
                                     // create a new chain for the constraint error
                                     resetErrorInfo(saveErrorInfo);
                                 }
-                                if (result = isRelatedTo(source, constraint, RecursionFlags.Target, reportErrors)) {
+                                if (result = isRelatedTo(source, constraint, RecursionFlags.Target, reportErrors, /* headMessage */ undefined, intersectionState)) {
                                     return result;
                                 }
                                 // prefer the shorter chain of the constraint comparison chain, and the direct comparison chain
diff --git a/tests/baselines/reference/jsxIntrinsicElementsCompatability.js b/tests/baselines/reference/jsxIntrinsicElementsCompatability.js
new file mode 100644
index 0000000000000..4381071491dba
--- /dev/null
+++ b/tests/baselines/reference/jsxIntrinsicElementsCompatability.js
@@ -0,0 +1,24 @@
+//// [jsxIntrinsicElementsCompatability.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from "react";
+function SomeComponent<T extends 'button' | 'a'>(props: { element?: T } & JSX.IntrinsicElements[T]): JSX.Element {
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return <div />
+}
+
+function Test<T extends 'button' | 'a'>(el: T) {
+    return <SomeComponent element={el} />
+}
+
+//// [jsxIntrinsicElementsCompatability.js]
+"use strict";
+exports.__esModule = true;
+/// <reference path="react16.d.ts" />
+var React = require("react");
+function SomeComponent(props) {
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return React.createElement("div", null);
+}
+function Test(el) {
+    return React.createElement(SomeComponent, { element: el });
+}
diff --git a/tests/baselines/reference/jsxIntrinsicElementsCompatability.symbols b/tests/baselines/reference/jsxIntrinsicElementsCompatability.symbols
new file mode 100644
index 0000000000000..86da5d624acd1
--- /dev/null
+++ b/tests/baselines/reference/jsxIntrinsicElementsCompatability.symbols
@@ -0,0 +1,33 @@
+=== tests/cases/compiler/jsxIntrinsicElementsCompatability.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from "react";
+>React : Symbol(React, Decl(jsxIntrinsicElementsCompatability.tsx, 1, 6))
+
+function SomeComponent<T extends 'button' | 'a'>(props: { element?: T } & JSX.IntrinsicElements[T]): JSX.Element {
+>SomeComponent : Symbol(SomeComponent, Decl(jsxIntrinsicElementsCompatability.tsx, 1, 31))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 23))
+>props : Symbol(props, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 49))
+>element : Symbol(element, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 57))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 23))
+>JSX : Symbol(JSX, Decl(react16.d.ts, 2493, 12))
+>IntrinsicElements : Symbol(JSX.IntrinsicElements, Decl(react16.d.ts, 2514, 86))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 23))
+>JSX : Symbol(JSX, Decl(react16.d.ts, 2493, 12))
+>Element : Symbol(JSX.Element, Decl(react16.d.ts, 2494, 23))
+
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return <div />
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+}
+
+function Test<T extends 'button' | 'a'>(el: T) {
+>Test : Symbol(Test, Decl(jsxIntrinsicElementsCompatability.tsx, 5, 1))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 7, 14))
+>el : Symbol(el, Decl(jsxIntrinsicElementsCompatability.tsx, 7, 40))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 7, 14))
+
+    return <SomeComponent element={el} />
+>SomeComponent : Symbol(SomeComponent, Decl(jsxIntrinsicElementsCompatability.tsx, 1, 31))
+>element : Symbol(element, Decl(jsxIntrinsicElementsCompatability.tsx, 8, 25))
+>el : Symbol(el, Decl(jsxIntrinsicElementsCompatability.tsx, 7, 40))
+}
diff --git a/tests/baselines/reference/jsxIntrinsicElementsCompatability.types b/tests/baselines/reference/jsxIntrinsicElementsCompatability.types
new file mode 100644
index 0000000000000..e0479dae19e78
--- /dev/null
+++ b/tests/baselines/reference/jsxIntrinsicElementsCompatability.types
@@ -0,0 +1,28 @@
+=== tests/cases/compiler/jsxIntrinsicElementsCompatability.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from "react";
+>React : typeof React
+
+function SomeComponent<T extends 'button' | 'a'>(props: { element?: T } & JSX.IntrinsicElements[T]): JSX.Element {
+>SomeComponent : <T extends "a" | "button">(props: {    element?: T;} & JSX.IntrinsicElements[T]) => JSX.Element
+>props : { element?: T | undefined; } & JSX.IntrinsicElements[T]
+>element : T | undefined
+>JSX : any
+>JSX : any
+
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return <div />
+><div /> : JSX.Element
+>div : any
+}
+
+function Test<T extends 'button' | 'a'>(el: T) {
+>Test : <T extends "a" | "button">(el: T) => JSX.Element
+>el : T
+
+    return <SomeComponent element={el} />
+><SomeComponent element={el} /> : JSX.Element
+>SomeComponent : <T extends "a" | "button">(props: { element?: T | undefined; } & JSX.IntrinsicElements[T]) => JSX.Element
+>element : T
+>el : T
+}
diff --git a/tests/cases/compiler/jsxIntrinsicElementsCompatability.tsx b/tests/cases/compiler/jsxIntrinsicElementsCompatability.tsx
new file mode 100644
index 0000000000000..faaec4fe77808
--- /dev/null
+++ b/tests/cases/compiler/jsxIntrinsicElementsCompatability.tsx
@@ -0,0 +1,12 @@
+// @strict: true
+// @jsx: react
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from "react";
+function SomeComponent<T extends 'button' | 'a'>(props: { element?: T } & JSX.IntrinsicElements[T]): JSX.Element {
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return <div />
+}
+
+function Test<T extends 'button' | 'a'>(el: T) {
+    return <SomeComponent element={el} />
+}
\ No newline at end of file