I was trying to add search icon inside search box here's my code so far :
<div className='search'>
<input
id="quick_search"
className="xs-hide"
name="quick_search"
placeholder="Search by creator, collectible or collection."
type="text"
onChange={(e) => {
changeKey(e);
}}
onKeyDown={keyPress}
value={keyword}
>
<i class="fa fa-search" aria-hidden="true"></i>
</input>
</div>
i face this Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
can anyone help me with this ? much appreciated !
thanks
React's input element the same as HTML's input element can't have children.
You have to make the icon appear in the input box using CSS, you can't place it as a child.
.form-field {
position: relative;
display: inline-block;
}
.icon {
position: absolute;
right: 0;
}
<div class="form-field">
<input>
<span class="icon">🔍</span>
</div>
Also, you didn't close the <input> tag. It's wrong because every tag in react has to be closed either by using the closing tag </input> or using a self-closing tag <input />
You code should probably look like this:
<div className='search'>
<input
id="quick_search"
className="xs-hide"
name="quick_search"
placeholder="Search by creator, collectible or collection."
type="text"
onChange={(e) => {
changeKey(e);
}}
onKeyDown={keyPress}
value={keyword}
/> {/* <--- notice `/` here */}
<i class="fa fa-search" aria-hidden="true"></i>
</div>
Related
I have a font awesome icon inside an anchor tag and a input type text field. When clicking on that anchor tag i want to show that icon in the input field's model value. Is it possible? Like commenting someone and add some similes with the comment.
Also if submit the form can I store the entire value in the database?
Component HTML -
<div class="stories-content">
<input type="text" [(ngModel)]="inputval">
<a href="javascript:void(0)" (click)="setEmoji()">
<span style="width: 30px; height: 30px;display: block;" class="far fa-grin"></span>
</a>
</div>
Component.ts -
setEmoji(){
this.inputval = //What To do
}
You can do it with cheatsheet of fontawesome. Demo
change font family of input to show icon in input
input{
font-family: "Font Awesome 5 Free";
}
and use cheatsheat code as input value
<div class="stories-content">
<input type="text" [(ngModel)]="inputval">
<a (click)="setEmoji('')">
<i class="fa fa-smile"></i>
</a>
</div>
and if you want to show this in somewhere you need to change its fontfamily also to show icon again
Every Emoji will be associated with one unique Unicode code (Decimal or Hexa Decimal). In Order to use that code, you are supposed to map into the inner HTML value like below.
<div class="stories-content">
<textarea [innerHTML]=inputVal></textarea>
<a href="javascript:void(0)" (click)="setEmoji()">
<span style="width: 30px; height: 30px;display: block;" class="far fa-grin"></span>
</a>
</div>
import { Component } from '#angular/core'
#Component({
selector: 'my-app',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
inputVal = '😂😄';
setEmoji(){
this.inputval = '😄'; //What To do
}
}
you can find the some of the sample emoji codes : https://www.w3schools.com/charsets/ref_emoji_smileys.asp
Using Semantic-UI / ReactJS want to add onClick function on button, but when I add, it call function on input click too, but I want to add only on button
handleClick= (e) => this.setState({ click: true});
...
<Input
action={{
color: 'teal',
labelPosition: 'left',
icon: 'cart',
content: 'Checkout',
}}
actionPosition='left'
placeholder='Search...'
defaultValue='52.03',
onClick={this.handleClick}
/>
Result:
<div class="ui left action input">
<button class="ui teal icon left labeled button">
<i aria-hidden="true" class="cart icon"></i>
Checkout
</button>
<input type="text" placeholder="Search..." value="52.03" />
</div>
See demo result here, in this page, serach You can pass a Button props object. to find example.
You need to add the onClick propery inside action.
action = {{
color: 'teal',
labelPosition: 'left',
icon: 'cart',
content: 'Checkout',
onClick: handleClick
}}
Since your passing an object in your action attribute to create your button you can simply add an onClick property
<Input
action={{
color: "teal",
labelPosition: "left",
icon: "cart",
content: "Checkout",
onClick: handleClick
}}
actionPosition="left"
placeholder="Search..."
defaultValue="52.03"
/>
https://codesandbox.io/s/semantic-ui-example-gyk4m?module=%2Fexample.js
You used Input and also handleClick on it, not Button, you need to use Input and Button separately, then call function on button like this:
<Input
placeholder='Search...'
defaultValue='52.03',
/>
<Button color='teal' content='Checkout' icon='cart' labelPosition='left' onClick={this.handleClick} />
I am making a React page which has a post and comments on the post. Now the onChange on being triggered re-renders the whole class which makes the typing in input slow.
Now, if the is declared in a separate class and the value entered in the input there can be sent to the main class for API call. But I am not able to do this. Can anyone help me?
Below is code for my comment section of the screen.
commentChange(html) {
this.setState({ post_comment: html})
}
<div className="post-comments">
<div className="post-comments-head">
<div>Comments ({this.state.comments.length})</div>
</div>
<div className="comments">
{this.createCommentList(this.state.comments2)}
</div>
</div>
<div className="post-commenting">
{this.state.reply == -1 ? <span>Comment as {this.state.name}</span>
: this.commentBy()}
<div className="write-comment-post">
<ReactQuill
data-gramm_editor="false"
onChange={this.commentChange}
value={this.state.post_comment}
className="post_comments_x"
placeholder="Write a comment"
ref={(ip) => this.myInp = ip}
autoFocus={true}
theme=""
/>
<div className="comments-submit">
<button className="submit-comment"
onClick={() => this.submitComment(this.state.reply)}
disabled={!enabledComment}>
Comment
</button>
</div>
</div>
</div>
The createCommentList function takes comments and returns a nested list of comments. Below is the section where new comment is added.
How to solve this because it is making typing a new comment very slow.
<div className="write-comment-post">
<ReactQuill
data-gramm_editor="false"
onChange={this.commentChange}
value={this.state.post_comment}
className="post_comments_x"
placeholder="Write a comment"
ref={(ip) => this.myInp = ip}
autoFocus={true}
theme=""
/>
create a seperate component for this
and only onn enter call parennt function else onchange it will trigger
We have some textboxes where the value needs to be selected from a popup list. The elements and the popup are like this:
The related html codes are as follows:
<div _ngcontent-c6="" class="col px-0">
<input _ngcontent-c6="" aria-multiline="false" autocapitalize="off"
autocorrect="off" class="form-control ng-dirty ng-valid open ng-touched"
formcontrolname="ESYSITENAME" id="esySiteName" name="" placeholder=""
role="combobox" type="text" autocomplete="off" aria-autocomplete="list"
aria-expanded="true" aria-activedescendant="ngb-typeahead-2-0"
aria-owns="ngb-typeahead-2">
<ngb-typeahead-window class="dropdown-menu show ng-star-inserted"
role="listbox" id="ngb-typeahead-2" style="top: 39px; left: 0px;">
<button class="dropdown-item ng-star-inserted active" role="option"
type="button" id="ngb-typeahead-2-0">
<ngb-highlight _ngcontent-c6="" _nghost-c25="" class="ng-star-inserted">
<span _ngcontent-c25="" class="ngb-highlight ng-star-inserted">
Bull Run Elementary School
</span>
</ngb-highlight>
</button>
</ngb-typeahead-window>
</div>
I have tried to select the Popup element using different strategies like:
let EsyNamePopup = $('#ngb-typeahead-2-0 > ngb-highlight > span');
await helpers.waitForElementVisibility(EsyNamePopup);
await helpers.clickWhenClickable(EsyNamePopup);
// or following way:
let EsyNamePopup = element(by.cssContainingText('span', 'Bull Run Elementary School,));
await EsyNamePopup.click();
None of them worked but got following error messages:
NoSuchElementError: No element found using locator: By(css selector, #ngb-typeahead-2-0 > ngb-highlight > span)
Is there a better strategy to select these elements?
I think you can try a long sleep before click on the pop option. If long sleep can fix your issue, it proves your wait function waitForElementVisibility has issue or you not give sufficient wait time.
await $('input#esySiteName').sendKeys('Bull');
await browser.sleep(15000)
await $('#ngb-typeahead-2-0 > ngb-highlight > span').click()
You could set up breakpoints and debug your code by following the steps in here.
http://www.protractortest.org/#/debugging
Might want to verify if sendkeys will initiate the typeahead popup or if element needs to be focused in order for that.
I have a login form for which browser has saved the user login detail. So when I open this page in the browser it shows me like this
but when I click on the page or press any button
this is the expected default behaviour.
I have tried
document.body.focus()
onload but this is not working.
then I set focus on one of the input(on name) but then what about other field? what is the best solution for this?
I know this fancy styling is not good but is there workaround for this?
I had this exact issue using React and Styled Components. To resolve the issue I used the following css inside my styled component (which was a <label>):
input:-webkit-autofill + &
This works by checking for an autofill in the input and applying our desired styling if true.
Note: You may need to replace & with input.
Try this
.login-form{
width: 50%;
}
form div{
padding: 10px;
}
form div label, form div .fa{
color: blue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form class="login-form text-center">
<h4>Sign in</h4>
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<label for="materialFormLoginEmailEx">Your email</label><br>
<input type="email" id="materialFormLoginEmailEx" class="form-control" placeholder="Admin">
</div>
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<label for="materialFormLoginPasswordEx">Your password</label><br>
<input type="password" id="materialFormLoginPasswordEx" class="form-control" placeholder="Password">
</div>
<div class="login-btn">
<button class="btn btn-default" type="submit">Login</button>
</div>
</form>
You need to add active class to the elements in the Login form:
For example:
<input id="password" placeholder="Password" name="password" type="password" class="active">
or added the code snippet below to the css:
input:-webkit-autofill { +label { #extend .active; } } }`
Let me know if this worked,
Thanks.