Editor inline dependent select2 resets to first option when unrelated column edited.

aaron.dunigan.atlee

Description of problem:
I'm using a dependent select2 with inline editing, where the options for select2 sourceFieldName are determined by the value of sourceId. There is another column sourceFieldModifier that is unrelated to the dependency. When I edit the sourceFieldModifier column, the data sent to my ajax function includes a change to sourceFieldName reverting to the first option.

i.e., when editing sourceFieldModifier, the log in line 143 below includes updated values for both sourceFieldModifier AND sourceFieldName, where the value of sourceFieldName is now the first option in the list.

In addition, whenever I click on the select2, it also reverts to the first option.

How can I prevent this from happening?

If I remove the call to editor.dependent() the problem doesn't happen, or if I change the field type from select2 to select it also doesn't happen. It seems to be a conflict between these two features.

function createFilingsDocumentTable()
  {
    var keys = ["documentFieldName", "source", "sourceFieldName", "sourceFieldModifier"]

    // The table column is labeled source, but the database column is sourceId
    const editFields = { 'source': 'sourceId' }

    // Create an instance of editor for this table
    editor = new $.fn.dataTable.Editor({
      ajax: ajaxDocumentFields,
      table: "#table",
      idSrc: 'id',
      fields: [
        {
          name: 'sourceId',
          data: 'sourceId',
          label: 'Source',
          type: 'select',
          options: [],
          placeholder: '--None--',
          placeholderValue: null,
          placeholderDisabled: false,
          // def: 'null',
          // nullDefault: true
        },
        {
          name: 'sourceFieldName',
          label: 'Source Field Name',
          type: 'select2',
          options: [],
          opts: {
            allowClear: true,
            placeholder: {
              id: null,
              text: 'Select an option'
            }
          }
        },
        {
          name: 'sourceFieldModifier',
          label: 'Source Field Modifier',
          type: 'text'
        }
      ]
    });

    // Make the options for the source field name dependent on the source
    editor.dependent('sourceId',
      function (val, data, callback, e)
      {
        let source = FILING_SOURCES[val];
        let options = source ?
          Object.keys(source.sourceFields).map(fieldName =>
          {
            const field = source.sourceFields[fieldName]
            return {
              label: field.name + (field.text ? ' (' + field.text + ')' : ''),
              value: field.name
            }
          })
          : []
        return {
          'options': {
            'sourceFieldName': options
          }
        }
      }
    );

    // Activate an inline edit on click of a table cell
    $('#table').on('click', 'tbody td:not(:first-child)', function (e)
    {
      editor.inline(this, {
        // Submit when input loses focus: this is needed in order for dropdowns to trigger on change, rather than requiring and enter key press
        onBlur: 'submit'
      });
    });

    // Configure and create the table
    var columnsData = keys.map(function (key)
    {
      var columnConfig = {
        'data': key,
        'name': key,
        'defaultContent': '',
        'width': (100 / keys.length).toFixed(0) + '%'
      };
      // Renderers
      // if (DATE_KEYS[key]) columnConfig.render = renderDate;
      // if (UTC_DATE_KEYS[key]) columnConfig.render = renderUtcDate;
      if (columnRenderers[key]) columnConfig.render = columnRenderers[key]
      if (editFields[key]) columnConfig.editField = editFields[key]
      return columnConfig
    })
    table = $('#table').DataTable({
      columns: columnsData,
      pageLength: -1,
      dom: 't',
      ajax: loadDocumentFields,
    });

  }

  function renderFilingSource(x, type, rowData, meta)
  {
    if (!rowData.sourceId) return ''
    // For all types: display, filter, sort
    let source = FILING_SOURCES[rowData.sourceId]
    if (source)
    {
      return source.title
    } else
    {
      return ''
    }
  }

  /**
   * DataTables ajax function to get the document fields
   */
  function loadDocumentFields(data, callback, settings)
  {
    let documentId = $('#filingDocument').val()
    if (documentId)
    {
      google.script.run
        .withSuccessHandler(callback)
        .withFailureHandler(somethingWentWrong)
        .getFilingDocumentFields(documentId)
    } else
    {
      callback({ data: [] })
    }
  }

  /**
 * DataTables ajax function to edit the document fields
 * See https://editor.datatables.net/reference/option/ajax
 * and for data parameter format: https://editor.datatables.net/manual/server#Server-to-client
 */
  function ajaxDocumentFields(method, url, data, success, error)
  {
    console.log(data.data)
    if (data.action !== 'edit')
    {
      console.warn("Action: " + data.action)
      return;
    }
    google.script.run
      .withSuccessHandler(function (returnData)
      {
        // console.log(returnData)
        success(JSON.parse(returnData))
      })
      .withFailureHandler(error)
      .editFilingDocumentFields(data)
  }

aaron.dunigan.atlee

I discovered a solution to part of the problem: I re-assigned the value in the call to editor.dependent by changing its return value to

return {
          'options': {
            'sourceFieldName': options
          },
          'values': {
            'sourceFieldName': data.values.sourceFieldName
          }
        }

Now the selection remains the same when I edit the sourceFieldModifier column.

But there's still the issue that whenever I click to edit a sourceFieldName it clears the existing value.

allan

Hi,

Are you able to give me a link to the page showing the issue so I can debug it please?

Thanks,
Allan

aaron.dunigan.atlee

It's a company-internal site so I'm not able to share a link, but I've reproduced the issue here:
http://live.datatables.net/tezupeji/12/edit?html,js,output
Click on any value in the "Source Field Name" column, and you'll see that the select2 immediately reverts to its placeholder value.