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

space between cursor and text in TextInput will add letterSpacing #28755

Closed
L-x-C opened this issue Apr 26, 2020 · 4 comments
Closed

space between cursor and text in TextInput will add letterSpacing #28755

L-x-C opened this issue Apr 26, 2020 · 4 comments
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@L-x-C
Copy link

L-x-C commented Apr 26, 2020

Description

when add letterSpacing to a TextInput, the space between cursor and text will not be 0, but letterSpacing

eg:
letterSpacing: 200

In android

image
image

Do you see the space between cursor and text?

in IOS

image
image

That's what we expect

React Native version:

react: 16.9.0
react-native: 0.61.5

@react-native-bot react-native-bot added the Component: TextInput Related to the TextInput component. label Apr 26, 2020
@fabOnReact
Copy link
Contributor

fabOnReact commented Apr 27, 2020

maybe connected to how android sets those spans in ReactEditText.java and the usage of getSpanStart

  private void manageSpans(SpannableStringBuilder spannableStringBuilder) {
    Object[] spans = getText().getSpans(0, length(), Object.class);
    for (int spanIdx = 0; spanIdx < spans.length; spanIdx++) {
      // Remove all styling spans we might have previously set
      if (spans[spanIdx] instanceof ReactSpan) {
        getText().removeSpan(spans[spanIdx]);
      }

      if ((getText().getSpanFlags(spans[spanIdx]) & Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
          != Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) {
        continue;
      }
      Object span = spans[spanIdx];
      final int spanStart = getText().getSpanStart(spans[spanIdx]);
      final int spanEnd = getText().getSpanEnd(spans[spanIdx]);
      final int spanFlags = getText().getSpanFlags(spans[spanIdx]);

      // Make sure the span is removed from existing text, otherwise the spans we set will be
      // ignored or it will cover text that has changed.
      getText().removeSpan(spans[spanIdx]);
      if (sameTextForSpan(getText(), spannableStringBuilder, spanStart, spanEnd)) {
        spannableStringBuilder.setSpan(span, spanStart, spanEnd, spanFlags);
      }
    }
  }

please provide reproducible example so i can debug this. thanks

@L-x-C
Copy link
Author

L-x-C commented Apr 27, 2020

maybe connected to how android sets those spans in ReactEditText.java and the usage of getSpanStart

  private void manageSpans(SpannableStringBuilder spannableStringBuilder) {
    Object[] spans = getText().getSpans(0, length(), Object.class);
    for (int spanIdx = 0; spanIdx < spans.length; spanIdx++) {
      // Remove all styling spans we might have previously set
      if (spans[spanIdx] instanceof ReactSpan) {
        getText().removeSpan(spans[spanIdx]);
      }

      if ((getText().getSpanFlags(spans[spanIdx]) & Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
          != Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) {
        continue;
      }
      Object span = spans[spanIdx];
      final int spanStart = getText().getSpanStart(spans[spanIdx]);
      final int spanEnd = getText().getSpanEnd(spans[spanIdx]);
      final int spanFlags = getText().getSpanFlags(spans[spanIdx]);

      // Make sure the span is removed from existing text, otherwise the spans we set will be
      // ignored or it will cover text that has changed.
      getText().removeSpan(spans[spanIdx]);
      if (sameTextForSpan(getText(), spannableStringBuilder, spanStart, spanEnd)) {
        spannableStringBuilder.setSpan(span, spanStart, spanEnd, spanFlags);
      }
    }
  }

please provide reproducible example so i can debug this. thanks

<TextInput style={{ letterSpacing: 100 }}></TextInput>

Try this on Android and Ios, and you will see...

Thanks a lot

@stale
Copy link

stale bot commented Jul 26, 2020

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 26, 2020
@stale
Copy link

stale bot commented Aug 2, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Aug 2, 2020
@facebook facebook locked as resolved and limited conversation to collaborators Oct 1, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

3 participants