React AsyncSelect onBlur keep input value












-1















With normal react-select V2 <Select> I used:



  componentDidMount() {
this.selectRef.select.onInputBlur = () => {};
}


to keep value of the input if user clicks somewhere outside. But after changing <Select> to <AsyncSelect> this doesn't work anymore. Any help?



Here is a DEMO Enter a value in first input and click outside - value remains. On second input it disappears.










share|improve this question























  • The second input doesn't seem to have any options there?

    – Colin
    Nov 21 '18 at 13:36











  • Thats just a demo like that, but it is not related to the issue anyway. Even though it doesnt have any options, i still need to keep the value

    – gizmo
    Nov 21 '18 at 13:37













  • But the demo doesn't show the behavior you're having an issue with, so how is it helpful?

    – Colin
    Nov 21 '18 at 14:01











  • @Colin omg are you serious? Read again - "Enter a value in first input and click outside - value remains. On second input it disappears."

    – gizmo
    Nov 21 '18 at 14:07











  • There's no value in the second input to select though?

    – Colin
    Nov 21 '18 at 14:15
















-1















With normal react-select V2 <Select> I used:



  componentDidMount() {
this.selectRef.select.onInputBlur = () => {};
}


to keep value of the input if user clicks somewhere outside. But after changing <Select> to <AsyncSelect> this doesn't work anymore. Any help?



Here is a DEMO Enter a value in first input and click outside - value remains. On second input it disappears.










share|improve this question























  • The second input doesn't seem to have any options there?

    – Colin
    Nov 21 '18 at 13:36











  • Thats just a demo like that, but it is not related to the issue anyway. Even though it doesnt have any options, i still need to keep the value

    – gizmo
    Nov 21 '18 at 13:37













  • But the demo doesn't show the behavior you're having an issue with, so how is it helpful?

    – Colin
    Nov 21 '18 at 14:01











  • @Colin omg are you serious? Read again - "Enter a value in first input and click outside - value remains. On second input it disappears."

    – gizmo
    Nov 21 '18 at 14:07











  • There's no value in the second input to select though?

    – Colin
    Nov 21 '18 at 14:15














-1












-1








-1








With normal react-select V2 <Select> I used:



  componentDidMount() {
this.selectRef.select.onInputBlur = () => {};
}


to keep value of the input if user clicks somewhere outside. But after changing <Select> to <AsyncSelect> this doesn't work anymore. Any help?



Here is a DEMO Enter a value in first input and click outside - value remains. On second input it disappears.










share|improve this question














With normal react-select V2 <Select> I used:



  componentDidMount() {
this.selectRef.select.onInputBlur = () => {};
}


to keep value of the input if user clicks somewhere outside. But after changing <Select> to <AsyncSelect> this doesn't work anymore. Any help?



Here is a DEMO Enter a value in first input and click outside - value remains. On second input it disappears.







javascript reactjs react-select






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 '18 at 13:33









gizmogizmo

766




766













  • The second input doesn't seem to have any options there?

    – Colin
    Nov 21 '18 at 13:36











  • Thats just a demo like that, but it is not related to the issue anyway. Even though it doesnt have any options, i still need to keep the value

    – gizmo
    Nov 21 '18 at 13:37













  • But the demo doesn't show the behavior you're having an issue with, so how is it helpful?

    – Colin
    Nov 21 '18 at 14:01











  • @Colin omg are you serious? Read again - "Enter a value in first input and click outside - value remains. On second input it disappears."

    – gizmo
    Nov 21 '18 at 14:07











  • There's no value in the second input to select though?

    – Colin
    Nov 21 '18 at 14:15



















  • The second input doesn't seem to have any options there?

    – Colin
    Nov 21 '18 at 13:36











  • Thats just a demo like that, but it is not related to the issue anyway. Even though it doesnt have any options, i still need to keep the value

    – gizmo
    Nov 21 '18 at 13:37













  • But the demo doesn't show the behavior you're having an issue with, so how is it helpful?

    – Colin
    Nov 21 '18 at 14:01











  • @Colin omg are you serious? Read again - "Enter a value in first input and click outside - value remains. On second input it disappears."

    – gizmo
    Nov 21 '18 at 14:07











  • There's no value in the second input to select though?

    – Colin
    Nov 21 '18 at 14:15

















The second input doesn't seem to have any options there?

– Colin
Nov 21 '18 at 13:36





The second input doesn't seem to have any options there?

– Colin
Nov 21 '18 at 13:36













Thats just a demo like that, but it is not related to the issue anyway. Even though it doesnt have any options, i still need to keep the value

– gizmo
Nov 21 '18 at 13:37







Thats just a demo like that, but it is not related to the issue anyway. Even though it doesnt have any options, i still need to keep the value

– gizmo
Nov 21 '18 at 13:37















But the demo doesn't show the behavior you're having an issue with, so how is it helpful?

– Colin
Nov 21 '18 at 14:01





But the demo doesn't show the behavior you're having an issue with, so how is it helpful?

– Colin
Nov 21 '18 at 14:01













@Colin omg are you serious? Read again - "Enter a value in first input and click outside - value remains. On second input it disappears."

– gizmo
Nov 21 '18 at 14:07





@Colin omg are you serious? Read again - "Enter a value in first input and click outside - value remains. On second input it disappears."

– gizmo
Nov 21 '18 at 14:07













There's no value in the second input to select though?

– Colin
Nov 21 '18 at 14:15





There's no value in the second input to select though?

– Colin
Nov 21 '18 at 14:15












1 Answer
1






active

oldest

votes


















1














Try changing your componentDidMount() to the following:



componentDidMount() {
this.selectRef.select.onInputBlur = () => {};
this.asyncRef.select.select.onInputBlur = () => {};
}


The normal select and the async selects have different structures, which is why this is necessary.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413222%2freact-asyncselect-onblur-keep-input-value%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Try changing your componentDidMount() to the following:



    componentDidMount() {
    this.selectRef.select.onInputBlur = () => {};
    this.asyncRef.select.select.onInputBlur = () => {};
    }


    The normal select and the async selects have different structures, which is why this is necessary.






    share|improve this answer




























      1














      Try changing your componentDidMount() to the following:



      componentDidMount() {
      this.selectRef.select.onInputBlur = () => {};
      this.asyncRef.select.select.onInputBlur = () => {};
      }


      The normal select and the async selects have different structures, which is why this is necessary.






      share|improve this answer


























        1












        1








        1







        Try changing your componentDidMount() to the following:



        componentDidMount() {
        this.selectRef.select.onInputBlur = () => {};
        this.asyncRef.select.select.onInputBlur = () => {};
        }


        The normal select and the async selects have different structures, which is why this is necessary.






        share|improve this answer













        Try changing your componentDidMount() to the following:



        componentDidMount() {
        this.selectRef.select.onInputBlur = () => {};
        this.asyncRef.select.select.onInputBlur = () => {};
        }


        The normal select and the async selects have different structures, which is why this is necessary.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 21 '18 at 15:00









        ColinColin

        4,6842830




        4,6842830
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413222%2freact-asyncselect-onblur-keep-input-value%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)