We are using draftJS for creating a rich text post/comment with user mention(draft-js-mention-plugin), and hashtag(draft-js-hashtag-plugin) functionality. Following is the code sample.
<FieldContainer
containerStyles={this.props.containerStyles}
editorStyles={this.props.editorStyles}
placeholderStyles={this.props.placeholderStyles}
height={this.props.height}
onClick={this.focus}
>
<Editor
editorState={this.props.editorState}
onChange={this.onChange}
plugins={this.plugins}
placeholder={this.props.placeholder}
ref={element => { this.editor = element;} }
onfocus={this.props.handleFocus}
onBlur={this.props.handleBlur}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={e => myKeyBindingFn(e, this.props.allowNewLine)}
readOnly={this.props.readOnly}
autoCapitalize={'none'}
autoComplete={'off'}
autoCorrect={'off'}
spellCheck={false}
/>
</PostFieldContainer>
This is working fine in desktop web browsers. Now we are trying to support mobile platform as well. We are facing following two issues in android chrome:
whenever I type space after a word, the keyboard is getting closed.
clearing a mention or tag completely breaks down our app with following error
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
at removeChild (https://192.168.1.9:3000/static/js/1.chunk.js:253583:22)
at unmountHostComponents (https://192.168.1.9:3000/static/js/1.chunk.js:264847:13)
at commitDeletion (https://192.168.1.9:3000/static/js/1.chunk.js:264915:9)
at commitMutationEffects (https://192.168.1.9:3000/static/js/1.chunk.js:267143:15)
.....
The above error occurred in one of your React components:
in div (created by DraftEditorBlock)
in DraftEditorBlock (created by DraftEditorContents)
in div (created by DraftEditorContents)
in div (created by DraftEditorContents)
in DraftEditorContents (created by DraftEditor)
in div (created by DraftEditor)
in div (created by DraftEditor)
in div (created by DraftEditor)
in DraftEditor (created by PluginEditor)
in PluginEditor (at PostField/index.js:363)
....
Any help or guidance is appreciated.
Tested it using android chrome and google keyboard.
Related
I'm testing Android application and need to scroll text. I have tried everything I found here and on a Internet but nothing is working.
Appium v1.4.1 (Server v1.7.2)
Python 3.x
Using selenium webdriver
I need scroll to the bottom of a page, not to specific element
The closest is
self.driver.execute_script("mobile: scroll", {"direction": "up"})
but it is not working
.
Log is:
selenium.common.exceptions.WebDriverException: Message: Unknown mobile command "scroll". Only shell commands are supported.
Thanks
For Android there are 2 good options when it takes to scrolling:
use TouchActions
actions = TouchActions(driver)
el = driver.find_element_by_id(<id of element you press to start swipe>)
action.press(el).move_to(x=100, y=-1000).release().perform()
You can also get screen size of the device to scroll more precisely:
screen_size = driver.get_window_size()
use native UiAutomator scrollIntoView method
self.driver.find_element_by_android_uiautomator('new UiScrollable(new UiSelector().resourceId("<id of scrollable view>")).scrollIntoView(new UiSelector().resourceId("<id of element to scroll to>"))')
You can read more here
I am rendering my Redux app like so -
<Provider store={store}>
<MyComponent />
</Provider>
the compiled code is
ReactDOM.render(React.createElement(
_reactRedux.Provider,
{ store: store },
React.createElement(MyComponent, null)
), document.getElementById(element_id));
This throws the error Uncaught Error: Invariant Violation: onlyChild must be passed a children with exactly one child. The development version of React also throws the following warning Warning: Failed propType: Invalid prop 'children' supplied to 'Provider', expected a single ReactElement.
If I change it to simply
<div>"Content"</div>
the compiled code comes out as
ReactDOM.render(React.createElement(
'div',
null,
'"Content"'
), document.getElementById(element_id));
and it renders properly.
The Provider version loads fine in desktop chrome as well as the chrome browser on the device.
Any pointers?
It has to do something with babel polyfill. If i remove the polyfill from the build process and use a CDN like polyfill.io using the tag
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
Then the problem is fixed and webpage loads. Still have to figure out why this happens though.
I had designed a Web page using JQuery. I was able to load the page in Android Webview. The page was rendered correctly on the device (Nexus 5).
After the recent update of Android (to Marshmallow) for Nexus 5, I am not able to view the Web Page on the WebView. I just see a small circle in the center of the Webview.
The same works on devices running older Android.
While debugging I found out that after removing the line - " link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"", the page was getting displayed. But I need the css file to design the page in a correct way.
Any help on this will be appreciated.
Solved the issue.
Need to add the following line (from Uncaught SecurityError: Failed to execute 'replaceState' on 'History': cannot be created in a document with origin 'null') before the line - "
<script>
$(document).bind('mobileinit',function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
I have an application, written in Sencha Touch 2.2.1, we just saw that on current Chrome (43) and on Android 4.x and 5.x some parts of the application aren't working, while on Safari on Windows, Mac and iOS everything is fine.
e.g. we have the following Code on the index.html getting called:
Ext.Viewport.items.get('main').setActiveItem(target);
Where targetis the name of the view to be loaded.
In the view we have the following code, that is not called in Chrome:
...
listeners: {
painted: function () {
this.fireEvent('isPainted');
}
},
...
The template of the view gets rendered to the html, but the listener is never called.
Any ideas on how this can be handled?
I have an address search field in my app. When this field gets focus I want to open the keyboard as in the following image.
It works fine for iOS when the keyboard type is set to Titanium.UI.KEYBOARD_NUMBERS_PUNCTUATION as in the following code
var search = Titanium.UI.createSearchBar({
barColor:'#c8c8c8',
autocorrect:true,
hintText:'enter address',
height:'43dp',
top:'75dp',
autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_WORDS,
keyboardType:Titanium.UI.KEYBOARD_NUMBERS_PUNCTUATION
});
However on Android it appears as in the following image.
I am using Titanium mobile SDK 1.7.5
You should probably add :
softKeyboardOnFocus : Titanium.UI.Android.SOFT_KEYBOARD_SHOW_ON_FOCUS
Unfortunately, it may be overridden by the system. Try it on another Android system (3.0 for example) if the problem persist.