Need a close option about bootstrap-iconpicker HOT 7 OPEN

Hi,

I am also facing same issue as James.

Can anyone guide me to fix it ?

from bootstrap-iconpicker.

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);
}

from bootstrap-iconpicker.

It seems to be related to the pull request that I created:
#20
Do you have the same bug if you specify the dialog as the iconpicker container?

from bootstrap-iconpicker.

Yes

I have same issue.

from bootstrap-iconpicker.

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

from bootstrap-iconpicker.

@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');

from bootstrap-iconpicker.

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');
}
});

from bootstrap-iconpicker.