Desktop: Cannot insert text to search text

[cometkim]

Summary

When entering text to the top right search, the cursor moves to end of the text when I try to insert text to middle.

Hangul(Korean characters) is worse, I cannot enter text completely.
Enter 한글 is going to ㄹㅡㄱㄴㅏㅎ

Steps to reproduce

Reproduced on:

• OS: Windows 10 & Ubuntu Xenial
• Client: Desktop App v4.0.0 (not reproduced on browsers)

1. Enter search text
2. Move the cursor position to middle/start of the text
3. Enter text into cursor position

Expected behavior

Entered text into the cursor position

Observed behavior (that appears unintentional)

The cursor moves back to end of text when I enter any text more.

[jasonblais]

@amyblais @yuya-oc We should consider fixing this and releasing v4.0.1

[cometkim]

It isn't reproduced with Mattermost v4.6.0

[yuya-oc]

Reproduced on plain electron 1.7.11. And also reproduced on v3.7.1.
But not reproduced on my older webapp v3.8. So I feel there is something wrong in recent webapp.

const {app, BrowserWindow} = require('electron');

let mainWindow;
app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(`https://pre-release.mattermost.com`);
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

app.on('window-all-closed', () => {
  app.quit();
});

[yuya-oc]

Reproduced on Linux Chromium 58 (58.0.3029.81). v58 is used by Electron 1.7.11.

[jasonblais]

@yuya-oc Ah, so it's a Chromium bug. Wondering if it's fixed in Chromium 59, which Electron v1.8.1 is using.

[yuya-oc]

@jasonblais Sorry to not write, electron 1.8 reproduced the problem.

[jasonblais]

@yuya-oc I see. I tried searching Electron and Chromium issues but didn't find a match for this issue. Perhaps we should create an issue on the Electron repo?

[yuya-oc]

Currently it's difficult. Our webapp is too large for them, so we should find out minimum condition to reproduce the problem first. However even if we could do that, almost of html/js are executed by internal Chrome rather than Electron. So probably we would need to wait newer Electron which uses Chrome 63.

I'm not sure I can do though, I'll take a look about webapp code.

[jasonblais]

@yuya-oc Sounds good. They're also working on Chromium 63 upgrade, but not sure when that would be released.

[yuya-oc]

I think the problem is caused by characteristics of React and Redux for <input> tag.

• https://github.com/reactjs/react-redux/issues/525
• https://github.com/facebook/react/issues/955

We have different typical text boxes on webapp: search_bar and post_create. But the problem is happening only on search_bar. It's connected to Redux store, but create_post is using setState() to keep their state. I think that's the largest difference between them.

However I'm not sure why the problem doesn't happen on the latest Chrome, and the way to avoid this problem for now.

[jasonblais]

Thanks Yuya! Great work on investigating this.

Maybe the issue is fixed on latest Chrome, and that's why it doesn't reproduce?

Also, would we be able to use setState() for the search bar too, in the webapp?

[yuya-oc]

Maybe the issue is fixed on latest Chrome, and that's why it doesn't reproduce?

Probably yes.

Also, would we be able to use setState() for the search bar too, in the webapp?

It's a little hard to say for me. I'm not familiar at whole of webapp. And I think that webapp team were developing to introduce Redux architecture to not rely on setState.

[cometkim]

I found a recent code change that seems to be related to this issue.

https://github.com/mattermost/mattermost-webapp/commit/a57d7814c81562ba6ab88f39927b2e56de9fde0f#diff-2a2de998d52194b5219f10c4d805c40fR288

I'm not sure this is the logical correct cause, But this has some similar context to the issue.

• Changed after v4.6
• Changed SearchBox
• Input event and the caret position.

[jasonblais]

@yuya-oc Any thoughts on that? I can talk to Harrison if you're not sure.

[yuya-oc]

@jasonblais In debugger, I think that the function was probably not called though, unfortunately I’m not sure.

[jasonblais]

@yuya-oc Should I create a ticket for the platform team to investigate?

[yuya-oc]

Possibly related: https://github.com/mattermost/mattermost-server/issues/8206

@CometKim I'm not sure about Hangul though, is the behavior you saw similar to the gif?

[cometkim]

@yuya-oc Not really. it looks like another issue. (and worse)

[yuya-oc]

@CometKim Thanks for taking a look.

So our issue has two problems, caret position and IME. ~But they might be from same cause: using redux state.~

[yuya-oc]

On IE11, IME problem seems to be fixed at latest master and it doesn't have caret problem. So possibly event handlers for IME are not working properly on Chrome 58.

[jasonblais]

Server ticket has been created, we'll track the issue there: https://mattermost.atlassian.net/browse/MM-9586

[jasonblais]

I reopened as https://mattermost.atlassian.net/browse/MM-9586 didn't fix the issue reported here.

@yuya-oc when you say IME problem seems to be fixed at latest master and it doesn't have caret problem. do you mean on latest Chrome version?

[cometkim]

@jasonblais I think that means latest version of mattermost on the desktop app. (it's still happening with 4.8.0-rc3 4.8.0-rc1)

And this issue cannot be closed by the ticket about IME problem seems not related with.

[yuya-oc]

"latest master" meant mattermost-server version. Now I don't have the issue on pre-release server (v4.8.0-rc3). But the search box for Mattermost Menu > View Members still has the issue.

[jasonblais]

@cometkim Which dialogs are you experiencing the issues? I can create a ticket for them (+ the View Members modal that @yuya-oc noted)

[cometkim]

desktop app v4.0.0 on windows and ubuntu at pre-release (4.8.0-rc3)

[yuya-oc]

Sorry, I was confusing. The issue still happens also in search box. When using IME, the problem looks like (but not) to be fixed.

[jasonblais]

Ah yes, I can reproduce it as well. @yuya-oc I could ask if one of the Mattermost engineers would have thoughts on the issue, what do you think?

[yuya-oc]

@jasonblais Sorry for late. Hmm...I should try testing minimum redux app though, for now, I think that the search box handles redux state in a different way from other message boxes.

Fortunately, [email protected] has no issue for this.

[jasonblais]

Ticket opened server-side: https://mattermost.atlassian.net/browse/MM-9955

[jasonblais]

@cometkim @yuya-oc This PR will fix it for Mattermost server v4.9 and later https://github.com/mattermost/mattermost-webapp/pull/1027