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