Unable to select(focus) the input columns

Tags: #<Tag:0x00007f8b19f0f158>
#1

Hi Team,

We are using handsontable in our application.
We found a bug in the handsontable. I Need some help to fix it
Details:

when I select (focus) any of the input columns in handsontable and change the value and de-select (un-focus) the input column and if I try to select (focus) the same column it was not able to focus the column. But when I select any of the other columns and try to select (focus) the old column it will be focused.

please find this video link https://drive.google.com/file/d/1_cwrpANKhKeAz_MhmagZJMG8yX5UeCkl/view?usp=sharing
to get more insight.

Can you please help like what calls would be trigged when I try to select any column or drive me through how to find the problem.

Please give some suggestions to find the problem. It is very hard for us to find the problem.

#2

Hi @bharath.kumar

It’s strange. We don’t notice this type of issue.
Maybe you use some custom editor or renderer?

Can you share a JS playground demo (JSFiddle, CodePen, StackBlitz)?

#3

Hi team,

thanks for the reply i will try to replicate the issue and get back to you.

#4

Hi team,

<HotTable
      id="hot"
      data={[
        [
          22,
          22,
          24,
          67,
          "2020-02-11T05:31:20.000Z",
          0,
          "22.0",
          "test",
          22,
          "22.0",
          ""
        ],
        [
          22,
          22,
          24,
          67,
          "2020-02-11T05:31:20.000Z",
          0,
          "22.0",
          "test",
          22,
          "22.0",
          ""
        ],
        [
          22,
          22,
          24,
          67,
          "2020-02-11T05:31:20.000Z",
          0,
          "22.0",
          "test",
          22,
          "22.0",
          ""
        ],
        [
          22,
          22,
          24,
          67,
          "2020-02-11T05:31:20.000Z",
          0,
          "22.0",
          "test",
          22,
          "22.0",
          ""
        ]
      ]}
      stretchH="all"
      columns={[
        { type: "text", editor: false, readOnly: true, title: "_ID" },
        { type: "text", editor: false, readOnly: true, title: "id" },
        {
          type: "text",
          editor: false,
          readOnly: true,
          title: "company group id"
        },
        { type: "text", editor: false, readOnly: true, title: "user id" },
        {
          type: "text",
          editor: false,
          readOnly: true,
          title: "updated by user at"
        },
        {
          type: "numeric",
          title: "in int 1",
          columnName: "in_int_1",
          isInput: true
        },
        {
          type: "numeric",
          title: "in float 1",
          columnName: "in_float_1",
          isInput: true
        },
        {
          type: "text",
          title: "in string 1",
          columnName: "in_string_1",
          isInput: true
        },
        { type: "text", editor: false, readOnly: true, title: "int 1" },
        { type: "text", editor: false, readOnly: true, title: "float 1" },
        { type: "text", editor: false, readOnly: true, title: "string 1" }
      ]}
      licenseKey={"license Key"}
    />
  </div>

please use the above code and check.

I tried to check in code sandbox and jsfiddle but it is throwing some other error. The above code is working my project please find the attached video drive link for the bug details

please find the versions
@handsontable/react@3.1.0
handsontable@7.2.2

#5

Hi @bharath.kumar

Honestly, I can’t reproduce your issue.
Maybe are we missing something - https://codesandbox.io/s/forum-4130-hw2os?

#6

Hi Team,

Thanks for the support.

There is some overriding css in our applcation it is causing the issue.

please find the below sandbox link https://codesandbox.io/s/forum-4130-jw072

css overrided
.handsontable div,
.handsontable input,
.handsontable table,
.handsontable tbody,
.handsontable td,
.handsontable textarea,
.handsontable th,
.handsontable thead {
z-index: 1;
}

we did not use any javascripts events or and custom renderer
can you please explain me why this css is causing the issue.

we added this css in our application for some other reason based on your explanation wee will try to figure out some way.

#7

Hey @bharath.kumar
in your video the columns are editable and in the last demo all are

readOnly: true,
editor: false,

even if I enable editing https://codesandbox.io/s/forum-4130-5fnwk

the issue is not replicable. Are you able to replicate this issue using my demo? If yes, please record it.

#8

Hi @aleksandra_budnik

Even in this https://codesandbox.io/s/forum-4130-5fnwk sandbox link, some columns are editable columns and the issue exists.

I have created another sandbox link which has only input columns https://codesandbox.io/s/forum-4130-v4h8n

please note this issue is occurring because we have overridden the table CSS with below

.handsontable div,
.handsontable input,
.handsontable table,
.handsontable tbody,
.handsontable td,
.handsontable textarea,
.handsontable th,
.handsontable thead {
z-index: 1;
}

please find video link https://drive.google.com/open?id=1KPDqbxj-EYVwSyRRgYvWjxGAQz-AOpOW for more details.

#9

Thank you for sharing the video. I can see what you mean. Once we click on the editable cell we can change the content but the cursor is gone.

I will investigate the case and get back to you today or tomorrow at the latest.

#10

that is 100% true. No matter what version I use and what setting I apply.

Please tell me why you wan to overwrite those settings?

if you go to https://cdn.jsdelivr.net/npm/handsontable@7.3.0/dist/handsontable.full.css you can see that we add our own z-index values to the elements. Some of the z-index are even above 100. We cannot guarantee that after changing any of those indexes the table will work bugless.

#11

Hi @aleksandra_budnik

Thanks for the support.
We need that css for customizing the table css.
It’s ok we will figure out some other way to do it.

1 Like
#12