Manual hex/rgb input field not working in Bootstrap modal

[jordib123]

I have issues setting the input value in the color picker (see image). For some reason I can't click and edit the value manually while the pickr is inside a bootstrap modal. When I put the pickr outside the modal with the same exact config it works fine. All other inputs in the pickr (opacity, color slider, ...) are working fine which makes me believe the z-index is not the issue. It has something to do with the modal... I have checked and played with the css values but nothing is helping. Any one with the same issues or have any clue what the problem might be?

I am loading the pickr via CDN (https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js & https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js) which currently is version 1.8.2 (the latest). We are using bootstrap Bootstrap v1.8.2

The pickr config (I am 99% sure it is not the config as it works fine outside the modal):

var _container_picker = $(".pickr:not(:has(>button))"); _container_picker.each(function () { var input = $(this).next("input.color-picker"); var current_color = input.val() || null; var pickr = new Pickr({ el: $(this)[0], theme: "nano", swatches: null, defaultRepresentation: "HEXA", default: current_color, comparison: false, closeOnScroll: true, components: { preview: true, opacity: true, hue: true, interaction: { hex: true, rgba: true, hsva: false, input: true, clear: false, cancel: false, save: false, }, }, });

Edit: apologies for the code, for some reason the indentation is not working..

[av01d]

Use the container config option:

var pickr = new Pickr({
...
container: $('.modal-body', '#myModal')[0], // or similar
...
});

[jordib123]

Use the container config option:

var pickr = new Pickr({
...
container: $('.modal-body', '#myModal')[0], // or similar
...
});

Thanks, that works!