Jquery ui dialog input text as title not working

Question

I'm using Jquery Ui to make a dialog using the following options:

$("#locations-dialog").dialog({
    autoOpen: false,
    title: '<input type="text" id="location-name" value="New Location">',
    draggable: false,
    modal: false,
    closeOnEscape: true,
    width: 660,
    height: 515,
});

As it is visible I'm using an input field as a title.

The issue I'm having is that when I click on top of it nothing happens meaning I can't edit the text.

Don't know if I'm doing anything wrong...but in the jquery ui says:

Any valid HTML may be set as the title

Answer 1

As others have said, that's because the dialog widget disables selection for all the elements in its title bar, even if the draggable option is set to false.

You can add the text box to the title bar after the dialog widget is created, as the answer to the duplicate question suggests, or you can call enableSelection() to re-enable selection on the title bar elements:

$("#locations-dialog").dialog("widget")
                      .find(".ui-dialog-titlebar")
                      .find("*").andSelf()
                      .enableSelection();

Answer 2

The binding of the dialog box is what is causing issue. See this URL for full explanation and a work around example.

jQuery UI Dialog - Input textbox in the titlebar is disabled?