Tabulator: Cannot edit cells from mobile devices

[niddu85]

When editing cells on mobile devices (in my case Android) it is impossible to get focus on the wanted cell.
Replicable using the online demo available www.tabulator.info and Chrome for Android
version 71.0.3578.99
Android 8.0

[olifolkerd]

It is working fine for me. I have just tried it on two separate Android
devices without issue.

What happens when you click on the cell?

Cheers

Oli

On Wed, 16 Jan 2019, 23:00 niddu85 <[email protected] wrote:

When editing cells on mobile devices (in my case Android) it is impossible
to get focus on the wanted cell.
Replicable using the online demo available www.tabulator.info and Chrome
for Android
version 71.0.3578.99
Android 8.0
[image: img_20190116_235553]
https://user-images.githubusercontent.com/28997550/51284169-e49c4900-19ea-11e9-8292-fcd3899aa2cb.jpg

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/1732, or mute the thread
https://github.com/notifications/unsubscribe-auth/AGhgzB2NDxABYy13WFrIsYLBjyveJ0khks5vD68dgaJpZM4aEH69
.

[niddu85]

The cursor enters for a while in the cell, the keyboard appears and then disappears and the focus is lost.
Which are your devices/browsers?

[niddu85]

Same issue on 2 xiaomi devices (mi5 and redmi note 4) and Amazon kindle fire using gboard and SwiftKey and Chrome and Opera

[niddu85]

Here attached the screen recording of the issue

Screenrecorder-2019-01-17-10-21-24-779.zip

[Fab-atka]

Hi Oli,
Congratulations on this excellent tool.
I can confirm this issue on android phone and android tablets using chrome and firefox.
I am using Tabulator v4.1.5
For me it seems to be the same issue as #1455 was. The keyboard appears for half a sec and then disappears. I could not change the fields that require a keyboard on tabulator.info either.

[Iocere]

Same issue for me on multiple devices/browsers.

Keyboard appearing for a short time and disappering. Sometimes stays open but closing on a key press like its losing focus.

[olifolkerd]

Hey All,

I have gotten to the bottom of what is going on here. fixing this bug causes another bug, so for the last couple of releases it looks like i have been toggling the fix on and off lol.

The 4.2 release should be out in a couple of weeks, i will make sure a fix for this is included then.

Cheers

Oli :)

[niddu85]

Great!! Thanks so much!

[olifolkerd]

It turns out this wasnt a bug as such, it was a handover from version 3.5.

I was confused because i was testing on the examples pages which work fine, it was only the home screen that was affected.

On the page that held the Tabulator there was a table.redraw() function bound to the window redraw event which was triggering a redraw of the table when the keyboard opened, ending the select.

The binding wasn't needed because as of version 4,0 Tabulator manages that for you.

I have removed the erroneous line in on the homescreen for the new version of the website i will be launching with version 4.2 on monday.

Thanks for the feedback.

Cheers

Oli :)

[niddu85]

i tested it and it works great!
thanks for your help

[endoram]

I have a basic table set up to allow editing and I'm having the problem with keyboard flashing while trying to edit on mobile. However on the main site I can edit the table with no flashing keyboard.

Using Android version 9 with web browser chrome Version 72.0.3626.105 with Tabulator 4.2.1

I'm I missing something? If so what?
Thanks

[endoram]

Ok got it working just needed to give the table a height

[adryx92]

Hi, I'm testing editing on mobile and it only seems to work on Blink-based browsers (I've tested it on Opera), while on Firefox it still shows the same issue.
See demo here

[olifolkerd]

Hey @adryx92

Which version of Tabulator are you using?

[adryx92]

Hey @adryx92

Which version of Tabulator are you using?

I'm using the last version (4.2.5). Could you reproduce the issue?

[W00ler]

@adryx92 I had the same issue on Chrome for Android (v. 71) and latest tabulator, but option autoResize: false fixed it.

[rtman]

@olifolkerd I'm also facing this issue in the latest tabulator version 4.2.5, while testing on chrome v73.0.3683.90) on a Redmi Note 4 running android 7.0

[rtman]

After tweaking the settings I have mobile keyboard working with

                resizableColumns: false,
                layout: 'fitColumns',
                autoResize: false

Seems like autoResizeis what did it. However the headers row isn't frozen, any ideas?

Here's my tabulator css

.formContainer {
    /*padding: 16px;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*height: 100%;*/
}
.tabulator {
    box-sizing: border-box;
    max-height: 100%;
    position: relative;
    border: 1px solid #333;
    background-color: #222;
    overflow: auto;
    font-size: 14px;
    text-align: left;
    -ms-transform: translatez(0);
    transform: translatez(0);
    background-color: var(--darkGray);
    /* background: none; */
    box-shadow: 0px 2px 10px 0px var(--black);
    border-radius: 8px;
    border: none;
}

Here's how I'm calling the tabulator

            <div className={'formContainer'}>
                <input
                    className={'formInput'}
                    name="filterValue"
                    value={filterValue}
                    onChange={this.onChangeFilter}
                    // onBlur={() => this.validateUserName(userName)}
                    type="text"
                    placeholder="Search ..."
                />
                <ReactTabulator
                    ref={this.reactTabulatorRef}
                    rows={rows}
                    columns={columns}
                    options={tabulatorOptions}
                />
            </div>

(this is with manually creating a tabulator instance in react via the docs btw)

[adryx92]

It seems that autoResize: false does the trick.

[rtman]

Just to update, I got the frozen header working by putting height: 100% on the tabulator instance and removing max-height:100% from my css