In tsx/jsx, some local define 'Component' are not in the completion list

[heroboy]

Bug Report

🔎 Search Terms

react, intellisense

🕗 Version & Regression Information

version: 4.2.3

I just test in recent vscode and the playground link.

⏯ Playground Link

Playground link with relevant code

💻 Code

import React, { ReactElement } from 'react';
import {InputNumber as RawInputNumber} from 'antd';

function Test2()
{
    var a = [/*a*/];
    var b = <div>
        /*b*/
    </div>;
    var c = <>
        /*c*/
    </>
}

function InputNumber():ReactElement<any,any>|null
{
    return null;
}

class ClassComponent extends React.Component
{
    render()
    {
        return null;
    }
}

function FunctionComponent(props: any): ReactElement<any, any> | null
{
	return null;
};

Please try to input the <InputNumber/>, <ClassComponent/> and <FunctionComponent/> at comment a,b and c.

🙁 Actual behavior

In the comment a: all things are correct.

In the comment b and c:
When you start to input <, the completion list doesn't contains InputNumber, ClassComponent and FunctionComponent. But RawInputNumber(the import one) is in the list.

And in vscode, it will be worse: it tries to import {InputNumber} from 'antd', and make the local defined InputNumber conflit.

🙂 Expected behavior

Make the local define component in the completion when input <

[andrewbranch]

This happens due to the parser being unable to recover from the unmatched < in those positions. This might be tricky.

[heroboy]

ok. I know what you mean. When input < all code after it will be invalid.
But I find that { and ( will not cause this problem. Maybe you should improve this.
Or I think like the auto complete the close brace function: when input character " ( [ it will auto close it. You could auto generate <></> and insert two cursor between the <>, when input the <.(Of course if I press backspace, it should delete all)