material design dynamic chips with jquery - chipSetEl.appendChild is not a function

Question

I'm trying to add tags when a user selects an option from a dropdown. So they can pick multiple items and there would then be tags underneath demonstrating the choices.

My current attempt, trying to take from: https://material.io/develop/web/components/chips/

 <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">   
<div class="mdc-chip-set mdc-chip-set--input" role="grid"></div>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script type="text/javascript">
  const chipSetEl = mdc.chips.MDCChipSet.attachTo(document.querySelector('.mdc-chip-set'));
  //const chipSet = new mdc.chips.MDCChipSet(chipSetEl);

  $(function() {
    $(document).on("change", '#search_selectWrap', function() {
      const chipEl = document.createElement('div');
      // ... perform operations to properly populate/decorate chip element ...
      chipSetEl.appendChild(chipEl);
      //chipSet.addChip(chipEl);
    });
  });
</script>

My error is currently:

chipSetEl.appendChild is not a function

However if I add uncomment the chipSet initialisation, I also get the error:

this.root_.querySelectorAll is not a function

chipset el console.log:

EDIT

New definition of chipSetEl and attempt of customisation:

const chipSetEl = document.querySelector('.mdc-chip-set');
const chipSet = new mdc.chips.MDCChipSet(chipSetEl);
console.log(chipSetEl);

$(function()
{
    $(document).on("change", '#search_selectWrap',function ()  {
        const chipEl = document.createElement('div');
        chipEl.shouldRemoveOnTrailingIconClick = true;
        chipEl.innerHTML = "hi";
        chipEl.style["background-color"] = "green"; 
        // ... perform operations to properly populate/decorate chip element ...
        chipSetEl.appendChild(chipEl);
        chipSet.addChip(chipEl);
    });
});

@RoryMcCrossan Sorry I am completely new to this. I thought my line: const chipSetEl = mdc.chips.MDCChipSet.attachTo(document.querySelector('.mdc-chip-set')); was the definition? I haven't omitted any code. Rather I am missing the most important part of the code it seems from your comment? — user2363025, Jan 13 '20 at 17:29
Apologies - I missed that line. My bad. However it appears that whatever `attachTo()` returns does not have the `appendChild()` function. — Rory McCrossan, Jan 13 '20 at 17:31
@RoryMcCrossan any alternative solution to getting the tags added dynamically? I've added a console log and can expand specific items which you think may be useful for debugging? — user2363025, Jan 13 '20 at 17:34
Note that the code here differs from the code in the link; there, `chipSetEl` refers to `document.querySelector('.mdc-chip-set');`, not the result of `attachTo`. There is a section on that same page, labeled [Adding Chips to the DOM](https://material.io/develop/web/components/chips/#adding-chips-to-the-dom) you might find edifying. — Heretic Monkey, Jan 13 '20 at 19:47
hi @HereticMonkey i've ammended the code accordingly and no longer get errors however I still don't see any tags show up. I can see the extra div created if I inspect elements. Shouldn't it be naturally picking up the css from the include: I want to add a colour and picture and text based on the selected dropdown — user2363025, Jan 14 '20 at 06:50
@HereticMonkey I tried doing the following: chipEl.innerHTML = "hi"; chipEl.style["background-color"] = "green"; but the result is not anything like what chips look like in the sample. I thought a) there would be a default material style and b) I'm not sure how to inject a custom colour via javascript — user2363025, Jan 14 '20 at 06:52
`style.backgroundColor = "green"`, but you've branched into new questions. I suspect that the DIV you're adding needs to have a class added to it; the documentation shows "mdc-chip" at the very least. The `shouldRemoveOnTrailingIconClick` is a property of the `MDCChip` class, not the element; you're getting the two mixed up again, this time in the opposite way :). — Heretic Monkey, Jan 14 '20 at 15:56

material design dynamic chips with jquery - chipSetEl.appendChild is not a function

0 Answers0