In my current project, I am working on a feature where I need to display a textarea whenever the user clicks in the input and the length of its content exceeds 20 characters. If not, the normal input should continue to be displayed.
However, I seem to be facing some unexpected behavior in my implementation.
The issue arises when the user clicks for the first time with short content and then follows it up with long content. In this scenario, both inputs end up becoming textarea, whereas only the input with long content should trigger this change.
I'm currently trying to figure out what is missing in my logic?
var longContentChecked = null;
scope.isLongContent = function(l){
return l && longContentChecked
};
scope.adaptLongContent = function(e){
var textarea = $(e.target).next();
if (textarea.val().length > 20) {
longContentChecked = true;
}else{
longContentChecked = false;
}
textarea.previous().focus();
textarea.focus();
};
VIEW
<td ng-if="gridLoadColumn($index)" ng-repeat="item in items track by $index">
<input
type="text"
ng-model="item.value"
ng-click="showLongContent = !showLongContent; adaptLongContent($event);"
ng-show="!isLongContent(showLongContent);"
/>
<textarea
class="dgrid-cell-long-content"
ng-blur="!showLongContent"
ng-show="isLongContent(showLongContent);"
ng-model="item.value"
></textarea>
</td>
UPDATED:
After making some adjustments, I believe I am getting closer to resolving the issue.
var longContentChecked = null;
var longContentIndex = null;
scope.isLongContent = function(l, idx){
var ret = (l && longContentChecked) && (longContentIndex == idx);
return ret;
};
scope.adaptLongContent = function(e, idx){
var textarea = $(e.target).next();
if (textarea.val().length > 20) {
longContentChecked = true;
longContentIndex = idx;
//textarea.focus();
}else{
longContentChecked = false;
longContentIndex = null;
}
};
VIEW
<tr ng-if="gridLoadRow($index)" ng-repeat="items in dataGrid track by $index">
<td><strong>{{$index+1}}</strong></td>
<td ng-if="gridLoadColumn($index)" ng-repeat="item in items track by $index">
<input
type="text"
ng-model="item.value"
ng-click="showLongContent = !showLongContent; adaptLongContent($event, $index);"
ng-show="!isLongContent(showLongContent, $index);"
/>
<textarea
class="dgrid-cell-long-content"
ng-blur="!showLongContent; test();"
ng-show="isLongContent(showLongContent, $index);"
ng-model="item.value"
></textarea>
</td>
</tr>
I am now attempting to handle the $index variable, although it's still not functioning as expected. As you can see, I added another TR element with repetition, as I am trying to work with the index values.
One challenge I'm facing is that the $index value repeats each time with the same value, for example: TD(0), TD(1), second line TD(0), TD(1). This lack of unique identification is causing issues. Even using $parent.$index doesn't solve the problem. How can I make the index an unique identifier in this scenario?