Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MudMask: Fix cursor jumping in table inline edit mode. #4037

Merged
merged 1 commit into from
Feb 24, 2022

Conversation

Mr-Technician
Copy link
Member

Fixes #3921

As described in #3921 above, editing a masked textfield inline in a table is a poor experience. Clicking anywhere in the field will "jump" the cursor to position 0, though the arrow keys could be used to move through the mask. See this try.mudblazor for an example of the issue: https://try.mudblazor.com/snippet/GumQawPkLXPfXone

I believe the click on the textfield causes additional renders to the internal mask, which causes the caret position to be set:
https://github.com/MudBlazor/MudBlazor/blob/dev/src/MudBlazor/Components/Mask/MudMask.razor.cs#L177

From what I can tell, the internal _caret is reset back to 0 regardless of the value returned from OnCaretPositionChanged: https://github.com/MudBlazor/MudBlazor/blob/dev/src/MudBlazor/Components/Mask/MudMask.razor.cs#L374

However this does not happen if the Mask.CaretPos is used when setting the caret position.

Description

How Has This Been Tested?

This has been tested visually. All existing masks behave as before in docs and all tests pass.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@Mr-Technician
Copy link
Member Author

@Garderoben This is the PR I wanted to get in but I expect @henon will need to look at it.

Perhaps it should be Mask.Selection instead of _selection here as well?

@codecov
Copy link

codecov bot commented Feb 24, 2022

Codecov Report

Merging #4037 (f746caa) into dev (82b95c7) will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##              dev    #4037   +/-   ##
=======================================
  Coverage   91.12%   91.12%           
=======================================
  Files         351      351           
  Lines       11618    11618           
=======================================
  Hits        10587    10587           
  Misses       1031     1031           
Impacted Files Coverage Δ
src/MudBlazor/Components/Mask/MudMask.razor.cs 93.43% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 82b95c7...f746caa. Read the comment docs.

@henon
Copy link
Collaborator

henon commented Feb 24, 2022

Perhaps it should be Mask.Selection instead of _selection here as well?

No, _selection is definitely correct here, I think.

OK, will merge this and I hope this will also fix the cursor jumps in editable DatePicker.

@henon henon merged commit eddb9a9 into MudBlazor:dev Feb 24, 2022
@henon henon added bug Something does not work as intended/expected bug-functional labels Feb 24, 2022
@henon henon added this to the 6.0.7 milestone Feb 24, 2022
@henon
Copy link
Collaborator

henon commented Feb 24, 2022

Darn, looks like DatePicker is not improved by this

@Mr-Technician Mr-Technician deleted the mask-table-caret-reset branch February 24, 2022 18:43
@aarongriffin-snap
Copy link

This appears to still be an issue in 6.0.11.

Just tested this with

<MudTextField
                                Class="regNumberInput"
                                For="@(() => _regModel.RegistrationNumber)"
                                FullWidth="false" 
                                id="AddTransaction-RegNo"
                                DisableUnderLine="true"
                                AutoFocus 
                                Immediate 
                                T="string" 
                                Mask="@(new PatternMask("****************"))" 
                                @bind-Value="_regModel.RegistrationNumber"
                            />

Running your finger along the keyboard numbers from 1 to 9 results in a jumbled text box :(
image

@henon
Copy link
Collaborator

henon commented Jul 4, 2022

@aarongriffin-snap you are running Blazor Server-Side, right? We currently don't know how to fix the server side cursor jumping. On WASM it should work.

jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
3dots pushed a commit to 3dots/MudBlazor that referenced this pull request Mar 23, 2023
ferraridavide pushed a commit to ferraridavide/MudBlazor that referenced this pull request May 30, 2023
ilovepilav pushed a commit to ilovepilav/MudBlazor that referenced this pull request Nov 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

MudMask: Cursor Jumping in PatternMask inside RowEditingTemplate
3 participants