2

I have implemented a Spectrum color Picker, it works perfectly, except for the showInput option which makes the text input not editable, it is not even selectable, it does not even focus on itself. If I select the color, however, the hexadecimal value appears in the input, so it works halfway. But I can't select it to manually set the hex value I want it to have.

This is the Jquery code :

$("#divPickerColor").spectrum({
    showInput : true ,
    preferredFormat: "hex",
    showButtons: false,
    allowEmpty:true                      
 });

this is the html code :

<script id="configurazioni-inserimento-modifica-stato-avanzamento" type="text/template">
  <div>
     <form id="formAddStatoAvanzamento" role="form" action="/" method="POST" 
     data-parsley-validate>
         <div class="form-group">
            <div class="row">
                <div id="colorazione" class="col-lg-12">
                    <input type="text" id="divPickerColor" />
                </div>
            </div>
          </div>
      </form>
  </div>
</script>

This script is called by a function to display it on a modal.

The tour is complex and I can't post all the code to you, I tried to put the main nodes in it. What I can say further is that I have looked at the CSS properties of the input, it has no disabling properties. I also tried to forcibly put them with JQuery in the console but nothing changed. The input generated by Spectrum is not editable and has no focus on itself.

I add that I have tried the same code in an html page outside my application, everything works perfectly. I think it's something related to the fact that this portion of html is included in a script. Does anyone know why and how to fix it?

Christian Parselli
  • 21
  • 3

1 Answers1

2

As @BugCatcherJoe wrote at the question comment, the answer is at the next link: https://github.com/bgrins/spectrum/issues/161

The solution that works for me was removing 'tabindex=-1' from the modal attributes.

Roy Shoa
  • 3,117
  • 1
  • 37
  • 41