I have both a text input and a dropdown that allows additions (both use the Form.xxx version). For both of these, I would like to add an x icon on the right, that when clicked, will either call a handler or will clear the input's value.
Is this possible in semantic-ui-react?
Thank you
I did find a solution, which I will share, but this means I can no longer have my lock icon on the left hand side, because an input can only have one icon.
What I've done is to use an Icon element, and add an onClick handler to that, as follows:
<Input ...
icon={<Icon name='delete' link onClick={this.handleDeleteClick}/>}/>
(Updated)
To clear the field, there is no "semantic-ui-react" shortcut as far as I know.
However, you can do this manually using your component state.
Here would be an example of this:
class ExampleClearField extends Component {
state = {}
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleClear = () => this.setState({ email: ''})
render() {
const { email } = this.state
return (
<Form.Input iconPosition='left' name="email />
<Icon name='x' link onClick={this.handleClear} />
<input/>
</Form.Input>
)
}
}
** Notice the link, which is needed for Icon to accept onClick.
Also, dont't forget about (you might need to change it's place depending on iconPostion)
As of Semantic UI React 0.83.0, it is possible to do this with Dropdowns using clearable. You cannot add your own event handler to the "x" by using this. Clicking the "x" will simply clear the selected value and call onChange with the new empty value.
Example from their docs:
const DropdownExampleClearable = () => <Dropdown clearable options={options} selection />
See the example output on their docs page here
Related
I am making a text editor using react-draft-wysiwyg for it in reactJS. I want to set the updated value of variable value in mobile.js file as soon as the button from editor.js file is clicked. Rigth now I am just updating it in editor.js file on click. But in the code below the value is not updated on every click. How can I update the value of value in mobile.js file whenever the button is clicked.
In Mobile component you need to edit from {this.value} to {value} and from export const Mobile = () => { to export const Mobile = ({ value }) => {.
The problem is that you are not reading the value prop from Mobile's parent and you are trying to read this.value which is undefined inside a functional component.
I want to automatically make links (e.g. https://xmpp.org/) into the text of a Text element clickable, so the link can be opened in a browser (without manually copying the link).
I can't add e.g. manually in my code, because the input comes directly from users.
Has Qt a simple solution for this in QtQuick/QML?
You can use something like that(Regex is from this answer);
Text {
property string text2: "http://www.google.com"
text: isValidURL(text2) ? ("<a href='"+text2+"'>"+text2+"</a>") : text2
onLinkActivated:{
if (isValidURL(text2)){
Qt.openUrlExternally(text2)
}
}
function isValidURL(str) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
return regexp.test(str);
}
}
You can use TextArea or TextEdit components, set textFormat property to TextEdit.RichText and listen to onLinkActivated signal.
E.g.
TextArea {
id: ...
textFormat: TextEdit.RichText
onLinkActivated: Qt.openUrlExternally( link )
}
Note: in order the link in browser you need to use Qt.openUrlExternally
One hint, in order to make the component not editable (so that user can not type in), DO NOT set enabled property (inherited from Item) to false, use readOnly property instead. Setting enabled would make link unclickable.
I've been stuck on this issue for about a week now, and I am not exactly sure how to solve it.
What I am trying to do is set the focus of ember-power-select from triggering an
I am currently able to set focus to the power select via tabbing or clicking, however I can't seem to gain its focus from another action.
(Like the hacky way I can think of is to call handleFocus directly and pass a select object)
In Component.hbs:
{{#power-select
class='ls-search-box'
options=searchList
selected=selected
onfocus=(action "handleFocus") as |item|
}}
In Component.js:
actions: {
handleFocus(select, e){
select.actions.open()
},
focusSearch(){
//console.log('focus Search');
var input = Ember.$(".ls-search-box");
if(input) {
input.focus();
}
}
}
Any know what I should do?
You need to change focusSearch like :
focusSearch(){
//console.log('focus Search');
var input = Ember.$(".ls-search-box > .ember-power-select-trigger");
if(input) {
input.focus();
}
}
You used a wrong css selector
I am currently writing unit tests for my React + MaterialUi application.
In my application I have a Dialog. I want to make sure depending on what button pressed on the dialog:
<FlatButton
label="Cancel"
secondary={true}
onTouchTap={this._cancelDialog.bind(this)}
/>
<FlatButton
label="Submit"
primary={true}
onTouchTap={this._confirmDialog.bind(this)}
/>
that the internal state changes accordingly.
Unfortunately i cannot get ahold of the dialog content using
TestUtils.scryRenderedComponentsWithType(FlatButton)
or
scryRenderedComponentsWithTag("button")
and so on.
Any ideas on how that flow can be tested?
Update 1
So I can get the Dialog instance by calling TestUtils.scryRenderedComponentsWithType(Dialog). But I can not get the dialogs content. DOM wise the content does not render inside the view itself. Its rendered in a new created node on document level (div). So i tried this:
let cancelButton = window.document.getElementsByTagName("button")[0];
Simulate.click(cancelButton);
cancelButton in the case above is the correct DOM element. Simulate.click however does not trigger the components click function.
regards
Jonas
just ran into the same problem. I looked into the source code, and the Dialog component's render method actually creates an instance of the component RenderToLayer. this component behaves as a portal and breaks react's DOM tree by returning null in its' render function and instead appending directly to the body.
Luckily, the RenderToLayer component accepts the prop render, which essentially allows the component to pass to the portal a function to be called when it is in a render cycle. This means that we can actually manually trigger this event ourselves. It's not perfect, i admit, but after a few days of poking around trying to find a solution for this hack i am throwing in the towel and writing my tests like this:
var component = TestUtils.renderIntoDocument(<UserInteractions.signupDialog show={true}/>)
var dialog = TestUtils.renderIntoDocument(component.refs.dialog.renderLayer())
var node = React.findDOMNode(dialog)
and here is what my UserInteractions.signupDialog looks like:
exports.signupDialog = React.createClass({
...
render: function() {
var self = this;
return (
<div>
<Dialog
ref='dialog'
title="Signup"
modal={false}
actions={[
<Button
label="Cancel"
secondary={true}
onTouchTap={self.__handleClose}
/>,
<Button
label="Submit"
primary={true}
keyboardFocused={true}
onTouchTap={self.__handleClose}
/>
]}
open={self.props.show}
onRequestClose={self.__handleClose}
>
<div className='tester'>ham</div>
<TextField id='tmp-email-input' hintText='email' type='text'/>
</Dialog>
</div>
)
}
})
Now i can make assertions against the child components rendered in the dialog box, and can even make assertions about events bound to my original component, as their relationship is maintained.
I definitely recommend setting up a debugger in your testing stack if you are going to continue using material ui. Theres not a lot of help for things like this. Heres what my debug script looks like:
// package.json
{
...
"scripts": {
"test": "mocha --compilers .:./test/utils/compiler.js test/**/*.spec.js",
"debug": "mocha debug --compilers .:./test/utils/compiler.js test/**/*.spec.js"
}
}
and now you can use npm test to run mocha tests, and npm run debug to enter debugger. Once in the debugger, it will immediately pause and wait for you to enter breakpoints. At this juncture, enter c to continue. Now you can place debugger; statements anywhere in your code to generate a breakpoint which the debugger will respond to. Once it has located your breakpoint, it will pause and allow you to engage your code using local scope. At this point, enter repl to enter your code's local scope and access your local vars.
Perhaps you didnt need a debugger, but maybe someone else will find this helpful. Good luck, happy coding!
Solved it as follows:
/*
* I want to verify that when i click on cancel button my showModal state is set * to false
*/
//shallow render my component having Dialog
const wrapper= shallow(<MyComponent store={store} />).dive();
//Set showModal state to true
wrapper.setState({showModal:true});
//find out cancel button with id 'cancelBtn' object from actions and call onTouchTap to mimic button click
wrapper.find('Dialog').props().actions.find((elem)=>(elem.props.id=='cancelBtn')).props.onTouchTap();
//verify that the showModal state is set to false
expect(wrapper.state('showModal')).toBe(false);
I ran into the same issue and solve it like that :
const myMock = jest.genMockFunction();
const matcherComponent = TestUtils.renderIntoDocument(
<MatcherComponent onClickCancel={myMock} activAction/>
);
const raisedButton = TestUtils.findRenderedComponentWithType(
matcherComponent, RaisedButton);
TestUtils.Simulate.click(ReactDOM.findDOMNode(raisedButton).firstChild);
expect(myMock).toBeCalled();
It works fine for me. However I'm still struggling with Simulate.change
Solution by avocadojesus is excellent. But I have one addition. If you try to apply this solution and get an error:
ERROR: 'Warning: Failed context type: The context muiTheme is marked
as required in DialogInline, but its value is undefined.
You should modify his the code as follows:
var component = TestUtils.renderIntoDocument(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<UserInteractions.signupDialog show={true}/>
</MuiThemeProvider>
);
var dialogComponent = TestUtils.findRenderedComponentWithType(component, UserInteractions.signupDialog);
var dialog = TestUtils.renderIntoDocument(
<MuiThemeProvider muiTheme={getMuiTheme()}>
{dialogComponent.refs.dialog.renderLayer()}
</MuiThemeProvider>
);
var node = React.findDOMNode(dialog);
Material UI fork the 2 enzyme methods. You need to use the createMount or the createShallow with dive option https://material-ui.com/guides/testing/#createmount-options-mount
When I trying to add a new record for a One2many tree, I've got a new pop up from(like the image below), I've need validate every value added to the tree, for that, I used onchange methods but they don't work properly...I would like override the method called when I click over the 'Save & Close' button, I tried overriding the write method, but in this way I don't have so many control over the error message what I want show for every single record added. I'm sure the best way to do what I need is get the name for method called when I clicked over the Save & Close method(In other words what method send the values from popup from to the One2many tree?). Please please HELPPP ME!
EDIT: Or how can I call a specific from(wizard) clicking on Add an item???
Call method on Button "Save & Close"
Add Js in module and do like this.
In js file:
openerp.module_name = function(instance) {
var QWeb = openerp.web.qweb;
_t = instance.web._t;
instance.web.FormView.include({
load_form: function(data) {
var self = this;
this.$el.find('.oe_abstractformpopup-form-save').click(this.on_button_save);
return self._super(data);
},
on_button_save: function() {
this.dataset.index = null;
this.do_show();
console.log('Save & Close button method call...');
},
});
};