How to fix react/jsx-closing-bracket-location issue in WebStorm(Idea, PhpStorm, etc)?
The problem:
getElem(name) {
return (<input type="text"
value={this.state.value}
/>);
}
This block will produce an error:
The closing bracket must be aligned with the opening tag (expected
column 13) react/jsx-closing-bracket-location
(docs for react/jsx-closing-bracket-location)
Same block without that problem:
getElem(name) {
return (<input type="text"
value={this.state.value}
/>);
}
P.S. I'm not allowed to modify eslint rules
You can't configure WebStorm to automatically format your code according to this rule, here's a related feature request: https://youtrack.jetbrains.com/issue/WEB-19721
But WebStorm won't break your formatting if you already have a code formated like that.
You can either format it like that manually or use ESLint --fix option (hit alt-enter on the error and select Fix with ESLint or run eslint --fix filename in the terminal).
I was facing this same problem. Here was my code:
<input
className="input__field input__field--haruki"
type="text" id="input-1"
onFocus={this.onFocus}
onBlur={this.onBlur}/>
To work I did that:
<input
className="input__field input__field--haruki"
type="text" id="input-1"
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
Just created a new line with the /> aligned with the original tag.
Related
I have a select input which, using livewire, calls a function whenever the selection changes. According to the documentation you can use $event.target.value to get to the selected value, however I want to send a different attribute value (myvalue) to my function.
<!-- this doesnt work -->
<select wire:onchange="myfunction($event.target.dataset.myvalue)">
<option value="1" data-myvalue="12345">
</select>
I got it working using Alpine.js but it seems odd that I need another framework to do so.
<!-- this does work, but requires alpine.js -->
<select x-data='{}' #change="$wire.call('myfunction',$el.options[$el.selectedIndex].dataset.myvalue)">
<option value="1" data-myvalue="12345">
</select>
Is there a pure livewire solution to this?
Your first code snippet is practically there already. The documentation you linked, in which $event is described, even shows why your code snippet doesn't work:
Your code uses wire:onchange, but Livewire checks for wire:change.
With your example though, you could also use wire:model="foo" and hook into the updatedFoo($newValue) function.
See the lifecycle hooks doc
I am trying to configure WebStorm 2018.2.5 to achieve this:
{ showButton &&
<Button />
}
But WebStorm auto-indents to this:
{ showButton &&
<Button />
}
I tried to configure HTML and JavaScript rules of the IDE, but failed to achieve the desired result.
The style I am trying to configure is suggested by AirBnB, but I am not interested in applying all of its rules.
It's not currently possible, please follow WEB-25338 for updates
<div draggable="true">
{{input value="default value" }}
</div>
In ember.js, as above code, when the div element has an attribute 'draggable="true"', on the webpage, the input area must need a double-click to edit in ie-11, but in chrome or firefox, it just need a click event to edit. Has anyone resolved this issue?
seems to be a bug
[IE 11] Input field of type text does not respond to mouse clicks when ancestor node has draggable=true
bad workaround:
<div style="background-color:lightgray" id="dragE" draggable="true">
<input id="inputE" type="text" />
</div>
click on the lightgray background
now the input field support single click
$('#dragE').focus(); <br>
$('#inputE').focus();<br>
was my solution
unfotunately reproducing with pluncer & co. did not work.
Or...set attribute draggable to "false", when the page goes to a production environment.
This worked for us.
I need to build a regex for extracting the value present under value field.
i.e "f70a8c3d0a6cbe2e235c7fd1dd27d052df7412ea"
HTML RESPONSE BODY :
Note: I have pasted just a minor part of the response....but formToken key is unique
<div class="hidden">
<input name="formToken type="hidden"
value="f70a8c3d0a6cbe2e235c7fd1dd27d052df7412ea"
/>
</div>
I wrote the below regex but it returned nothing:
regex("formToken" type="hidden" value="([^"]*)"/>).find(0).exists, found nothing
Can you try this?
regex("type="hidden".*value="(.*?)[ \t]*"/>).find(0).exists
Instead of a regex, you could use a css selector check which is probably way easier once you have ids or css classes to search for.
Thank you all....I was able to get formToken using css
.check(css("input[name='formToken']", "value").saveAs("formTokex"))
Works like this for me:
.exec(http("request_1")
.get("<<<<YOUR_URL>>>>>")
.check(css("form[name='signInForm']", "action").saveAs("urlPath"))
and later printing it:
println(session( "urlPath" ).as[String])
In Codeception the fillField works fine when I have
<input type="text" name="email"> but it does not work when <input type="email" name="email">
I have tried with the following code
$I->fillField('input[name=email]', 'user#domain.com');
Also With $I->fillField('email', 'user#domain.com');
But it does not work. I am getting the following error.
ElementNotVisibleException: Element is not currently visible
I have never tested on email field still If it doesn't work, you can choose some work arounds like below: -
(1) Using JS
$I->executeJS('window.document.getElementsByName('email')[0].value='###value###'');
(2) Using low level webdriver code : -
$I->executeInSelenium(function (\Webdriver $webdriver) {
$webdriver->findElement('###XPATH###')->sendKeys(###value###);
});
Again, if you get any Codeception specific issues, please raise them here
I hope it helps.
I got the answer actually, Now I can target any form element by XPATH without running executeInSelenium
So in chrome / firefox I inspect the dom and right-click and copy the xpath,
as an example:
$I->fillField('//*[#id="register-form"]/fieldset/section[3]/div/div/label/input', 'user#domain');
And it works great for other form elements too