Pickr input always disabled

[dhehwa84]

I want to be able to edit the color input/output. Mine is always disabled. Below is my code

JQuery:

 const pickr = new Pickr({

          // Selector or element which will be replaced with the actual color-picker.
          // Can be a HTMLElement.
          el: '#' + elementId,

          // Where the pickr-app should be added as child.
          container: 'body',

          // Which theme you want to use. Can be 'classic', 'monolith' or 'nano'
          theme: 'classic',

          // Nested scrolling is currently not supported and as this would be really sophisticated to add this
          // it's easier to set this to true which will hide pickr if the user scrolls the area behind it.
          closeOnScroll: false,

          // Custom class which gets added to the pcr-app. Can be used to apply custom styles.
          appClass: 'custom-class',

          // Don't replace 'el' Element with the pickr-button, instead use 'el' as a button.
          // If true, appendToBody will also be automatically true.
          useAsButton: false,

          // Size of gap between pickr (widget) and the corresponding reference (button) in px
          padding: 8,

          // If true pickr won't be floating, and instead will append after the in el resolved element.
          // It's possible to hide it via .hide() anyway.
          inline: false,

          // If true, pickr will be repositioned automatically on page scroll or window resize.
          // Can be set to false to make custom positioning easier.
          autoReposition: true,

          // Defines the direction in which the knobs of hue and opacity can be moved.
          // 'v' => opacity- and hue-slider can both only moved vertically.
          // 'hv' => opacity-slider can be moved horizontally and hue-slider vertically.
          // Can be used to apply custom layouts
          sliders: 'v',

          // Start state. If true 'disabled' will be added to the button's classlist.
          disabled: false,

          // If true, the user won't be able to adjust any opacity.
          // Opacity will be locked at 1 and the opacity slider will be removed.
          // The HSVaColor object also doesn't contain an alpha, so the toString() methods just
          // print HSV, HSL, RGB, HEX, etc.
          lockOpacity: false,

          // Precision of output string (only effective if components.interaction.input is true)
          outputPrecision: 0,

          // Defines change/save behavior:
          // - to keep current color in place until Save is pressed, set to `true`,
          // - to apply color to button and preview (save) in sync with each change
          //   (from picker or palette), set to `false`.
          comparison: true,

          // Default color. If you're using a named color such as red, white ... set
          // a value for defaultRepresentation too as there is no button for named-colors.
          default: defaultColor!== null? defaultColor : '#42445a',

          // Optional color swatches. When null, swatches are disabled.
          // Types are all those which can be produced by pickr e.g. hex(a), hsv(a), hsl(a), rgb(a), cmyk, and also CSS color names like 'magenta'.
          // Example: swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7'],
          swatches: [],

          // Default color representation of the input/output textbox.
          // Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
          defaultRepresentation: 'HEX',

          // Option to keep the color picker always visible.
          // You can still hide / show it via 'pickr.hide()' and 'pickr.show()'.
          // The save button keeps its functionality, so still fires the onSave event when clicked.
          showAlways: false,

          // Close pickr with a keypress.
          // Default is 'Escape'. Can be the event key or code.
          // (see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
          closeWithKey: 'Escape',

          // Defines the position of the color-picker.
          // Any combinations of top, left, bottom or right with one of these optional modifiers: start, middle, end
          // Examples: top-start / right-end
          // If clipping occurs, the color picker will automatically choose its position.
          // Pickr uses https://github.com/Simonwep/nanopop as positioning-engine.
          position: 'bottom-middle',

          // Enables the ability to change numbers in an input field with the scroll-wheel.
          // To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five
          adjustableNumbers: false,

          // Show or hide specific components.
          // By default only the palette (and the save button) is visible.
          components: {
              preview: true,
              opacity: true,
              hue: true,

              interaction: {
                  hex: false,
                  rgba: true,
                  hsva: false,
                  input: true,
                  clear: true,
                  save: true
              }
          },

          // Translations, these are the default values.
          i18n: {

              // Strings visible in the UI
             'ui:dialog': 'color picker dialog',
             'btn:toggle': 'toggle color picker dialog',
             'btn:swatch': 'color swatch',
             'btn:last-color': 'use previous color',
             'btn:save': 'Save',
             'btn:cancel': 'Cancel',
             'btn:clear': 'Clear',

             // Strings used for aria-labels
             'aria:btn:save': 'save and close',
             'aria:btn:cancel': 'cancel and close',
             'aria:btn:clear': 'clear and close',
             'aria:input': 'color input field',
             'aria:palette': 'color selection area',
             'aria:hue': 'hue selection slider',
             'aria:opacity': 'selection slider'
          }
      });

disabled input/output box:

[friedrichkeydel]

I've got the exact same issue!

[simonwep]

Please stick to the Issue Template. Create a JSFiddle and describe what you've done as detailed as possible and break your issue down to a minimum. This will help me to resolve it as fast as possible.

[plumber-craic]

~+1 - can't figure out why my inputs are disabled~ nevermind, I needed to use the container option since my pickr is inside a magnificPopup modal: container: $(inputElement).parent()[0],