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.

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

Datalist aren't converting properly #109

Open
seanmavley opened this issue Apr 11, 2016 · 3 comments
Open

Datalist aren't converting properly #109

seanmavley opened this issue Apr 11, 2016 · 3 comments

Comments

@seanmavley
Copy link

This is what I get:

.medium-6.columns
    label
      | Arrival
      input(list='arrival', type='text', placeholder='Arrival', required='', autocomplete='')
      datalist#arrival
      select(name='arrival')
        option
        option(value='individual') Individual
        option(value='organization') organization

When I put in this:

<div class="medium-6 columns">
    <label>Arrival
        <input list='arrival' type='text' placeholder="Arrival" required autocomplete />
        <datalist id="arrival">
            <select name="arrival">
                <option></option>
                <option value="individual">Individual</option>
                <option value="organization">organization</option>
            </select>
        </datalist>
    </label>
</div>

However, the correct rendering should be

.medium-6.columns
    label
      | Arrival
      input(list='arrival', type='text', placeholder='Arrival', required='', autocomplete='')
      datalist#arrival
          select(name='arrival')
            option
            option(value='individual') Individual
            option(value='organization') organization

The select needs to be indented to make the datalist work, otherwise, the select creates a separate input field when rendered.

Forgive me if the issue is with http://html2jade.org, though it points back to this repo

@donpark
Copy link
Owner

donpark commented Apr 12, 2016

bug confirmed. bug seems to be isolated to datalist element which is weird.

added to my todo-when-not-busy list. thx.

@donpark
Copy link
Owner

donpark commented Apr 12, 2016

Turns out problem is fairly deep, stemming from using jsdom-little which is based on an old fork of jsdom and lacks definitions for datalist tag.

Switching to latest jsdom does fix the bug but has hard to ignore negative side-effects like:

  1. auto-insertion of empty head element when not present in HTML
  2. conditional comments get evaluted, removing contents for failed conditions.

#1 is not serious but #2 is. And there may be other side-effects I overlooked.

Option A: patch jsdom-little to support missing elements. Putting time I don't have into legacy code seems like a waste. So, unless I get a PR, this option is not looking good.

Option B: patch 'jsdom'. This may be worth doing except I don't have the time at the moment.

Deferred for now.

@seanmavley
Copy link
Author

Until it gets fixed, I think its only as easy as just indenting the datalist part after the conversion, as it happens to be the only tag element not converting properly. Thanks for looking into the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants