AG Grid原生JS的NumericCellEditor数字输入框无滚动条问题求助

问题背景 #

使用AG Grid官方的NumericCellEditor实现单元格编辑，功能正常，但网格内的数字输入框无法显示标准HTML数字输入框的上下调节按钮。已设置type="number"、step、min、max等属性，参数可在控制台正常查看，尝试改用单元格渲染器也未解决。相关代码片段：

class NumericCellEditor {
    // 初始化方法
    init(params) {
       this.eInput = document.createElement('input');
       this.eInput.className = 'simple-input-editor';
       this.eInput.type = "number";
       this.eInput.step = 1;
       this.eInput.min = 1;
       this.eInput.max = 10;
       console.log(this.eInput);
       // 其他初始化逻辑...
  }

可行解决方法 #

• 覆盖AG Grid默认CSS样式
  AG Grid的内置样式可能通过-webkit-appearance等属性隐藏了数字输入框的调节按钮，需自定义CSS强制恢复：

  /* 针对WebKit内核浏览器（Chrome、Safari等） */
  .simple-input-editor[type="number"]::-webkit-inner-spin-button,
  .simple-input-editor[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: inner-spin-button;
      margin: 0;
  }
  /* 针对Firefox */
  .simple-input-editor[type="number"] {
      -moz-appearance: textfield;
  }
  

  注：如果使用AG Grid默认的编辑输入框类.ag-cell-edit-input，则替换上述选择器为该类名。

• 调整输入框尺寸避免按钮被截断
  若输入框高度过窄，调节按钮可能被容器截断，可设置输入框的最小高度和内边距：

  .simple-input-editor {
      min-height: 24px;
      padding: 2px 4px;
  }
  

• 确认编辑状态下输入框的焦点状态
  部分浏览器仅在输入框获得焦点时显示调节按钮，需确保AG Grid在进入编辑模式时，正确为输入框赋予焦点。可在init方法末尾添加：

  this.eInput.focus();
  

内容的提问来源于stack exchange，提问作者Xyz753