Feature: Dropdown: Inline Editing with submit after selection

[strtob]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of yii2-editable.
• This is not an usage question. I confirm having gone through and read the documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Pls. see the subject.

This works like a charme, after enter the text input value is submitted:

[
                    'class' => EditableColumn::class,
                    'attribute' => 'cost_rate',
                    'editableOptions' => function ($model, $key, $index) {
                        return [
                            'asPopover' => false,
                            'inlineSettings' => [
                                'templateBefore' => '',
                                'templateAfter' =>  ''
                            ],
                            'header' => 'Cost Rate',
                            'inputType' => Editable::INPUT_TEXT,
                            'options' => [
                                'class' => 'form-control',
                                'placeholder' => 'Enter cost rate...',
                            ],
                            'formOptions' => ['action' => ['update-cost-rate']],  // Action to process the update
                        ];
                    },
                    'value' => function ($model) {
                        return $model->cost_rate;
                    },
                    'contentOptions' => ['class' => 'editable-column'],
                ],

Unfortunately, this feature does not work for a dropdown. After selecting an option, the validation runs successfully, but the value isn't submitted. I have tried using plugin events, which works so far, but how can I return to the value link with the new value.

Does anyone have a better solution for this?

 [
                    'class' => EditableColumn::class,
                    'attribute' => 'cost_time_type_id',
                    'editableOptions' => function ($model, $key, $index) {
                        return [
                            'asPopover' => false,
                            'submitOnEnter' => true,
                            'inlineSettings' => [
                                'templateBefore' => '',
                                'templateAfter' =>  '',
                            ],
                            'header' => Yii::t('app', 'Cost Time Type'),  // Translatable header
                            'inputType' => Editable::INPUT_DROPDOWN_LIST,
                            'data' => \yii\helpers\ArrayHelper::map(\app\models\CostTimeType::find()
                                ->all(), 'id', 'name'),
                            'options' => [
                                'class' => 'form-control',
                            ],
                            'pluginEvents' => [
                                'editableChange' => 'function(event, val) {
        // Log the selected value to the console
        console.log("Selected Cost Time Type ID:", val);

        // Store the context (this) for use in the AJAX success function
        var context = $(this);
        
        // Trigger the AJAX request here
        $.ajax({
            url: "' . \yii\helpers\Url::to(['update-cost-time-type']) . '",
            type: "POST",
            data: {
                id: ' . $model->id . ', // Assuming you have an ID to send
                cost_time_type_id: val,
            },
            success: function(response) {
               console.log("AJAX response:", response); // Log the entire response
                
                // Assuming the response contains the updated name
                if (response.output) { // Check if output has a valid value
                    context.html(response.output); // Update the display value with the new selection
                } else {
                    console.warn("No output returned from server, displaying old value.");
                }

                // Convert the field back to static text
                context.editable("toggle"); // This closes the editable field
                
                // Make it selectable again
                context.editable(); // Re-initialize the editable field to ensure it can be edited again
                
                // Log the success response
                console.log("AJAX request successful:", response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // Handle any errors
                console.error("AJAX request failed:", textStatus, errorThrown);
                // Optionally, revert back to the previous value if needed
                context.editable("toggle");
            }
        });
    }',
                            ],