question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow disabling copy | look up | share menu on text select.

See original GitHub issue

Is your feature request related to a problem? If so, Please describe.

When user long-presses text inside react-native-wrbview the default copy | look up | share menu appears.

Screenshot 2019-10-06 at 12 23 57 pm

Describe the solutions you came up with

I tried injecting the following CSS into the HTML page.

*:not(input):not(textarea) {
  -webkit-touch-callout: none !important;
  -webkit-user-select: text !important; // I want to allow users to select text
}

but the copy | look up | share menu still apprears.

Additional context

it would be nice to allow disabling or customizing this menu.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

5reactions
apostophercommented, Oct 13, 2019

I was able to hide the menu using this solution: How do I disable default text selection behaviour in a WKWebView

update the code in this file: node_modules/react-native-webview/ios/RNCWebView.m

- (instancetype)initWithFrame:(CGRect)frame
{
  if ((self = [super initWithFrame:frame])) {
    super.backgroundColor = [UIColor clearColor];
    _bounces = YES;
    _scrollEnabled = YES;
    _showsHorizontalScrollIndicator = YES;
    _showsVerticalScrollIndicator = YES;
    _directionalLockEnabled = YES;
    _automaticallyAdjustContentInsets = YES;
    _contentInset = UIEdgeInsetsZero;
    _savedKeyboardDisplayRequiresUserAction = YES;
    _savedStatusBarStyle = RCTSharedApplication().statusBarStyle;
    _savedStatusBarHidden = RCTSharedApplication().statusBarHidden;

#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
    _savedContentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
#endif
  }

  if (@available(iOS 12.0, *)) {
    // Workaround for a keyboard dismissal bug present in iOS 12
    // https://openradar.appspot.com/radar?id=5018321736957952
    [[NSNotificationCenter defaultCenter]
      addObserver:self
      selector:@selector(keyboardWillHide)
      name:UIKeyboardWillHideNotification object:nil];
    [[NSNotificationCenter defaultCenter]
      addObserver:self
      selector:@selector(keyboardWillShow)
      name:UIKeyboardWillShowNotification object:nil];

    // Workaround for StatusBar appearance bug for iOS 12
    // https://github.com/react-native-community/react-native-webview/issues/62
      [[NSNotificationCenter defaultCenter] addObserver:self
                                               selector:@selector(showFullScreenVideoStatusBars)
                                                   name:UIWindowDidBecomeVisibleNotification
                                                 object:nil];

      [[NSNotificationCenter defaultCenter] addObserver:self
                                               selector:@selector(hideFullScreenVideoStatusBars)
                                                   name:UIWindowDidBecomeHiddenNotification
                                                 object:nil];
    // https://github.com/react-native-community/react-native-webview/issues/934
      [[NSNotificationCenter defaultCenter] addObserver:self
                                               selector:@selector(menuWillShow:)
                                                   name:UIMenuControllerWillShowMenuNotification
                                                object:[UIMenuController sharedMenuController]];
  }

  return self;
}

- (void)dealloc
{
  [[NSNotificationCenter defaultCenter] removeObserver:self];
 // https://github.com/react-native-community/react-native-webview/issues/934
  [[NSNotificationCenter defaultCenter] removeObserver:self
                                        name:UIMenuControllerWillShowMenuNotification
                                        object:[UIMenuController sharedMenuController]];
}

 // https://github.com/react-native-community/react-native-webview/issues/934
-(void)findUI:(UIView*) view{
    if([@"UICalloutBar" isEqualToString:[[view class] description]]){
        [view removeFromSuperview ];
        return;
    }

    for(UIView* subview in view.subviews){
        [self findUI: subview];
    }
}

 // https://github.com/react-native-community/react-native-webview/issues/934
-(void)menuWillShow:(NSNotification *)notification
{
    NSArray* windows = [[UIApplication sharedApplication] windows];
    for(UIWindow* window in windows){
        if([@"UITextEffectsWindow" isEqualToString:[[window class] description]]){
            [self findUI:window];
        }
    }
}

I’m using patch-package to add this patch in react-native-webview v7.4.0

2reactions
dzcpycommented, Jan 12, 2021

+1, I hope it can be built-in in this project

Read more comments on GitHub >

github_iconTop Results From Across the Web

Allow disabling copy | look up | share menu on text select. #934
When user long-presses text inside react-native-wrbview the default copy | look up | share menu appears. Screenshot 2019-10-06 at 12 23 57 pm....
Read more >
How to Enable/Disable | Show mini menu when selecting text ...
Hello FriendsIn this Video I Am Gonna Tell You That How to Enable / Disable | Show mini menu when selecting text in...
Read more >
How to Enable/Disable 'Show mini menu when selecting text ...
In this Video, I will show you "How to Enable / Disable 'Show mini menu when selecting text in PDFs' in Edge Browser...
Read more >
How to Disable Text Selection, Copy, Cut, Paste and Right-click
How to Disable Copy, Cut, and Paste with JavaScript/jQuery. ... You can allow text selection, but prevent copy and cut functions using the...
Read more >
How to Enable & Disable Mini Menu on Text Selection in Edge
How to Enable & Disable Mini Menu on Text Selection in Microsoft Edge ... Copy, let you copy the text from PDF; Search...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found