Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Interfering with <select> lists #62

Closed
krsyoung opened this issue Apr 14, 2015 · 3 comments
Closed

Interfering with <select> lists #62

krsyoung opened this issue Apr 14, 2015 · 3 comments
Assignees
@nfrasser
Labels
bug enhancement

Comments

@krsyoung
Copy link

I'm currently experiencing an issue where linkify is "changing" the values within my <select> lists. The following code illustrates the issue:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="linkify.min.js"></script>
<script src="linkify-jquery.min.js"></script>

</head>

<body>
<div class="container">
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>
<script>
$('.container').linkify();
</script>
</body>
</html>

I would expect that my select list defaults to 1 when the page is loaded. However, after including the linkify() call it defaults to 5 (in FF the last item in the select list, in chrome seems to be some random element). It completely ignores <option selected>3</option> as well.

I have confirmed both the 1.x and 2.x versions show the same issue. I'm going to try to hack around to see if I can identify the issue but was curious if any others had experienced the same thing.

update

Looks the following code is causing the issue (tearing down the select list options and rebuilding them). This causes the rebuilt select list to land on the last element (regardless of selected or default value):

    // linkify-jquery.js, 2.0 master, line 99-107

    // Clear out the element
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }

    // Replace with all the new nodes
    for (var i = 0; i < children.length; i++) {
        element.appendChild(children[i]);
    }

Not exactly sure how to address this. I'm wondering if I can just build a CSS selector that skips <select> elements for now?
@nfrasser
Copy link
Owner

Hi @krsyoung, big thanks for reporting the issue and going out of your way to find out the cause. Your suggestion to somehow ignore <select> elements makes sense, but really the issue is that we're rebuilding the DOM here when all we need to do is replace a few text nodes.

The proper fix here would be to avoid removing/appending DOM nodes that linkify doesn't touch (i.e., anything that isn't a Text node), probably using something like insertBefore.

I'll see if I can issue a fix for it soon. For now, I would avoid calling Linkify on elements that contain select lists.

@krsyoung
Copy link
Author

Thanks @nfrasser! Your fix suggestion definitely sounds like the way to go.

I also went with your suggestion (to basically stop being so lazy) and be a little more selective with the linkify targets (I actually used a customized version of the data-linkify which also works with page:load vs just document ready). Working like a charm.

Overall a very helpful library!

@nfrasser nfrasser added this to the 2.1 milestone Apr 18, 2015
@nfrasser nfrasser self-assigned this Apr 18, 2015
@collinalexbell
Copy link

I was calling linkify on $('html'). Is there a way to make this same call, but exclude all selects??

@nfrasser nfrasser mentioned this issue Jun 19, 2015
Merged
@nfrasser nfrasser removed this from the 4.1+ milestone Oct 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nfrasser nfrasser

Labels
bug enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@nfrasser @collinalexbell @krsyoung