Need a close option

[jamesjenner]

G'day,

Loving your project and I am finding it very useful.

However I have one small problem. I'm using bootbox (a boostrap based dialog utility) to display a dialog to ask the user to select some information. Within the dialog I'm using your project, bootstrap-iconpicker.

However if the user selects to close the dialog (via the close button) without closing the iconpicker, then the iconpicker remains.

If there was a way that I could destroy the popup manually then I could destory any popups when the dialog close option is triggered.

Cheers, James.

[dhp-denero]

Hi,

I am also facing same issue as James.

Can anyone guide me to fix it ?

[dhp-denero]

Hello James,

I looked inside the code and find the root cause of the issue. it will close the icon picker popup on selection or click on body part.

You can fix it by override close event of bootstrap dialog. close: function () { $('.iconpicker').each(function () { if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { $(this).popover('destroy'); } }); this._super.apply(this, arguments); }

[mpsq]

It seems to be related to the pull request that I created: https://github.com/victor-valencia/bootstrap-iconpicker/pull/20 Do you have the same bug if you specify the dialog as the iconpicker container?

[dhp-denero]

Yes

I have same issue.

[victor-valencia]

Maybe you can solve using the div tag instead of the button label.

In the latest version, this feature is included.

• .
  • Support for button and div tags.
  • All iconset includes the empty icon value.
  • Option rows accepts the value 0 to indicate all rows.
  • Add options:
  • align
  • header
  • footer
  • Add methods:
  • setAlign
  • setHeader
  • setFooter
  • Support for 1 more icon fonts:
  • Material Design Icons v1.1.1

[jamesjenner]

@victor-valencia I'm not sure how using the div tag instead of button label will resolve the issue, as I need the selection of an icon to be via a popup, not a panel within an existing panel.

@merildev Not the same problem sorry.

@dhp-denero Thank you for the tip. Not exactly what I needed but I didn't realise I could call destroy, so using your code I managed to write the following:

onEscape: function () {
  $('#selectPanelIcon').each(function () {
    $(this).popover('destroy');
  });

  return true;
},

This works perfectly with bootstrap-iconpicker, which is what I was using. I found that the above doesn't cause any exceptions, even if there is no active popover.

However I would suggest that the API for iconpicker include an option to allow open/close of the icon selection popup, maybe something along the lines of the following:

$('#target').iconpicker('openPicker');
$('#target').iconpicker('closePicker');

[vseryakov]

Here is my solution, i just made the button toggle, in version 1.7.0 line 466:

$this.off("click").on('click', function(e) { e.preventDefault(); if (!$this.data('bs.popover')) { $this.popover({ animation: false, trigger: 'manual', html: true, content: op.table, container: 'body', placement: op.placement }).on('shown.bs.popover', function () { data.switchPage(op.icon); data.bindEvents(); }); $this.data('bs.popover').tip().addClass('iconpicker-popover'); $this.popover('show'); } else { $this.popover('destroy'); } });