Materialize: Change chip code to allow custom close buttons

[k4kfh]

I think it would be useful to have the option of using any HTML element as a close button for a chip. With the current implementation, any of the Materialize icons that you put inside a chip automatically become a close button. This is handy if that's all you want to do, but if you plan on having an icon in there for another reason, it's highly annoying to have to modify things every time you want to do that. Also, you might want to have another element (an image, for example) close the tag. I have both of these use cases in my project, so I made a small modification to materialize.js to make it possible.

On line 3284, I changed it so that the line is this:

$(document).on('click.chip', '.chip .close-chip-btn', function (e) {

Rather than the original. This worked well for me (despite my limited knowledge of jQuery) so I figured I'd see if anyone else thought it was a good idea. If I'm not contributing this suggestion "properly" you'll have to pardon me, I'm relatively new to GitHub so I'm "flying blind" here. Correct me if I did anything stupid. :stuck_out_tongue_closed_eyes:

[Sajonara]

+1

Could you explain what this change does and if one could override the normal behavior when I'd add this to the footer of a document?

[k4kfh]

If you don't know, the default behavior is for any button (anything of the .material-icons class) to function as a close button. You can call a function with onclick with the button, but regardless of what the function does the chip will disappear. I needed the chip to only vanish in certain instances, so this wouldn't work.

The change I outlined above makes it so that any element inside the chip that belongs to .close-chip-btn will function as a close button, but anything that doesn't will function just like it would anywhere else. If you need more information on the default behavior, see the MaterializeCSS documentation on Chips.

For example, if I used this markup:

<div class="chip">
    Some Text
    <i class="material-icons">close</i>
</div>

With the default behavior, the button would make the chip vanish. With my behavior, this would do nothing. If that seems useless, take the example below:

<div class="chip">
    This is not a closable chip
    <!---This icon is an "add" icon from google's material design icons-->
    <i class="material-icons" onclick="someJSfunction()">add</i>
</div>

With the default behavior, it would close the chip (just like the example above) because anything inside it that belongs to .material-icons closes the chip. With my behavior, however, this would not close the chip. It would execute someJSfunction(), but the chip would remain on the page.

Now take this example:

<div class="chip">
    <i class="material-icons left" onclick="someJSfunction()">add</i>
    This has 2 buttons
    <i class="material-icons right close-chip-btn">close</i>
</div>

This markup would yield a chip with two buttons: an add button and a close button.

With my version:

• The <i class="material-icons left" onclick="someJSfunction()">add</i> button would not close the chip, and would execute someJSfunction(), when clicked.
• The <i class="material-icons right close-chip-btn">close</i> button would not execute Javascript, but would close the chip. Adding the close-chip-btn class makes it behave just like _all_ icons do now.

With the existing code:

• Both buttons would close the chip when clicked.
• the add button would execute someJSfunction(), but would still close the chip, when clicked. this posed a problem for me.

Could you explain what this change does and if one could override the normal behavior when I'd add this to the footer of a document?

@Sajonara I'm not sure I understand what you're asking about the footer of a document. Are you asking what you would add to the bottom of your HTML page to enable my version of the chip code? If so, you can't do it from HTML alone, you must edit the Materialize.js file as I outlined in my original post. If I'm misunderstanding your question, please clarify, I'll be happy to answer.

Hope this helps!

[Riari]

Good idea. I'd like to have more control over chip icons as I'm trying to use them like this:

It's problematic having them close regardless of what the icon is.

[k4kfh]

It's problematic having them close regardless of what the icon is.

Precisely. The Chip design is quite universally useful, but the closing feature makes it a pain to use them.

[acburst]

Merged in chips plugin.

I've also added the generalization to the close buttons here 9559790099eaf05c2d8c58fbe1f8783a18bf32d4. Now it will only trigger a close if you add the class close to it

[TetianaP]

@acburst If chip icon is not a close one - its style is broken. Can you check it please. I may create a separate issue, if it is required.

[devmetal]

@TetianaP

Hi, i working on a project with materialize and react. I got the same issue when i try to make stateful this little component. I have to remove the close class also but this is the css code and its working for me:

<i
   onClick={() => onRemove(topic)}
   className="removable material-icons">
      close
</i>

i.removable {
  cursor: pointer;
  float: right;
  font-size: 16px;
  line-height: 32px;
  padding-left: 8px;
}

For now, i can hanle the active tags state in my component avoid the big errors :)
Hope its help :)

[Edited]
The css from the materializecss library.

[kasaiee]

I had this issue too but with auto complete chips!

This is my code to solve the problem:

$('.chips-autocomplete').chips({
    autocompleteOptions: {
        data: {
            'Apple': null,
            'Microsoft': null,
            'Google': null
        },
        limit: Infinity,
        minLength: 1
    },
    onChipAdd: function(autocomplete, tag) {
        $(tag).find('.material-icons').removeClass('material-icons close').addClass('fa fa-close right').text('').css('margin-top', '8px');
    }
});

I hope this will be useful