Editable Textbox on Highchart Datalabel

I want to create textbox on the each point of highchart.

I am able to render a textbox however, it is not editable Below is the code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highcharts Editable Data Label</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="container" style="width: 600px; height: 400px;"></div>

And below is the js script

<script>
    Highcharts.AST.bypassHTMLFiltering = true;
$(document).ready(function(){
    // Sample data
    var data = [{
        name: 'Tokyo',
        y: 7,
        description: 'This is Tokyo'
    }, {
        name: 'New York',
        y: 8,
        description: 'This is New York'
    }, {
        name: 'London',
        y: 9,
        description: 'This is London'
    }];

    // Create the chart
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'area'
        },
        title: {
            text: 'Highcharts Editable Data Label'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function() {
                        return '<b>' + this.point.name + '</b><br>Value: ' + this.y + '<br><input type="text" class="commentInput" placeholder="Enter comment" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px;">';
                    }
                },
                point: {
                    events: {
                        click: function () {
                            // Do something when a point is clicked
                            console.log('Point clicked:', this);
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Cities',
            data: data
        }]
    });

    // Example event listener for input change
    $('#container').on('input', '.commentInput', function() {
        console.log('Input changed:', $(this).val());
    });
});
</script>

</body>
</html>

I tried searching on highchart blogs, stackoverflow but couldn't find a proper solution.

Is it possible to create a editable textbox on datalabel or tooltip of highcrats?

Solution

You need to inlude onclick="this.focus()" in the input attributes.

Demo: https://jsfiddle.net/BlackLabel/xz5f1rju/