Data-driving select won't open and it scrolls to the top of the page

[alexeisenhart]

Description

I have a data-driven questionnaire in my website. There is a fixed list of Questions in a Questionnaire, and each Question can be configured to be different prompt types, text or a select at this point. If it's a select question then there's a list of options. Anyway, my point in mentioning this is to point out that I have multiple questions with different values, different options, but everything is saved to the same location.

I'm trying to hook everything up using 2 calls to editable, one to set up the text answers and a 2nd call to set up the select questions. The select data list is grabbed from a data-* field.

Text is working fine, but the select isn't. It renders the select correctly, but it doesn't always open the drop down when I click on the field, and my browser navigates to the top of the page. I'm not sure if this is a bug or if I've wired it up incorrectly.

How to reproduce

This pen reproduces the clicking issue, but not the scrolling issue.

Open this link, try to open and close the drop down list. About 10% of the clicks will open the drop down.

https://codepen.io/crispyghost/pen/BapJaGp

Any advice?

[alexeisenhart]

I just realized that it also scrolls to the top of the page when I click inside a textbox for the text answers as well. I can click on the "Click to edit" link and that works fine to display the textarea. However, it scrolls to the top of the page every time I click in the textarea to edit the contents.

Here's how I'm hooking up the text answers:

    $(".editable-answer").editable("/Question/UpdateAnswer", {
        type: 'autogrow',
        cssclass: 'form',
        inputcssclass: "form-control editable-input-override autogrow",
        submitcssclass: "btn btn-success",
        cancelcssclass: "btn btn-danger",
        submit : 'Save',
        cancel: 'Cancel',
        indicator: '<div class="spinner-border text-primary mr-2" role="status"><span class="sr-only">Loading...</span></div>',
        tooltip : "Click to edit...",
        onblur: "ignore",
        submitdata: function (revert, settings, submitdata) {
            var p = $(this).closest(".editable-answer");

            submitdata.answerID = p.data("answer-id");
            submitdata.questionID = p.data("question-id");
            submitdata.answerSheetID = p.data("answer-sheet-id");
        },
    });

[NicolasCARPi]

Well, I can confirm that I also see the weird behavior of the select only appearing once in a blue moon and disappearing fast. If you remove the "href" attribute of your a, then this behavior disappears, and also you should not scroll to top. You can then add some clickable css class to make the a without href appear like a clikable link.

[alexeisenhart]

That worked beautifully. Thank you so much!